This article has shared with you the specific code for JS to implement a simple tab switching effect for your reference. The specific content is as follows
js tab switching code:
<!DOCTYPE html><html><head lang="en"> <meta charset="gb2312"> <title>Practical Questions- Tab</title> <style type="text/css"> *{ margin:0px; padding:0px; } #tab{ margin:10px; } #tab ul{ list-style:none; height:36px; border-bottom:2px solid black ; display:block; } #tab ul li{ float:left; display:inline-block; padding:0px 15px; height:34px; line-height:34px; margin-right:5px; border:1px solid #ccc; border-bottom:none; cursor:pointer; } #tab div{ padding:5px; border:1px solid #ccc; border-top:none; } #tab ul li.on{ border-top:2px solid black; border-bottom: 2px solid white; } .hide{ display:none; } </style> <script type="text/javascript"> window.onload=function(){ var mytab =document.getElementById("tab"); var myul=mytab.getElementsByTagName("ul")[0]; var myli=myul.getElementsByTagName("li"); var mydiv=mytab.getElementsByTagName("div"); // alert(mydiv.length) for(i=0,len=myli.length;i<len;i++){ myli[i].index=i; myli[i].onclick=function(){ for(var n=0;n<len;n++){ myli[n].className=""; mydiv[n].className="hide"; } this.className="on"; mydiv[this.index].className=""; } } } </script></head><body><!-- HTML page layout--><div id="tab"> <ul> <li>Real estate</li> <li>Home</li> <li>Second-hand house</li> </ul> <div> 2.75 million yuan to purchase Changping Lintie 3 bedrooms with a total price of 200,000 yuan to purchase one bedroom 2 million yuan to purchase 1.4 million yuan to purchase Anjia East Third Ring Road 1.4 million yuan to purchase 530,000 yuan to purchase 530,000 yuan to purchase East 5 Ring Road 50 square meters to reduce the current house of 5,000 yuan to purchase 5,000 yuan to purchase 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to build a 300 yuan to buy 5,000 yuan to buy 5,000 yuan to buy 5,000 yuan to build a 300 yuan to buy 5,000 yuan to buy 5,000 yuan to build a 300 yuan to buy 5,000 yuan to buy 5,000 yuan to build a 300 yuan to buy 5,000 yuan to buy 5,000 yuan to build a 300 yuan to the King of Buildings in the Park of the Park</div> <div> A 40-square-meter rental house is renovated and a beautiful girl's mixed-up nest. Classic fresh and simple Ou Ai's 90-square-meter old house is rejuvenated. New Chinese style. Cool and warm. 66-square-meter contrast color lively home tiles are like choosing a good wife's bathroom flue design.</div> <div> Tongzhou luxury 3 bedrooms 2.6 million. Second ring scarce 2 bedrooms 2.50w. West 3 ring transparent 2 bedrooms 2.9 million. 1.3 million. 2 bedrooms. Limited purchase of Huangchenggen Primary School District only 2.6 million. 1.21 square meters. 700,000 yuan! Exclusive villa 2.8 million. Suzhou Bridge 2 bedrooms discounted price 2.48 million.</div></div></body></html>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.