The examples in this article share with you the specific implementation code for the js tab switching effect for your reference. The specific content is as follows
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>Zhu Zhu made</title><script src="js/jquery.js" type="text/javascript"></script><style> *{ margin: 0; padding: 0; } body{ background-color: #fff; font-family: "Microsoft Yahei"; font-size: 18px; width: 1000px; margin: 50px auto; color:#000000; } .wrapper{ width: 350px; } #nav ul{ border-bottom: 2px solid yellowgreen; height: 32px; } #nav li{ display: inline-block; border: 2px solid #999; border-bottom: none; margin-left: 10px; width: 65px; text-align: center; line-height: 30px; } #nav li:hover{ cursor: pointer; } #content{ display: block; border: 1px solid blue; border-top: none; text-align: center; height: 100px; line-height: 100px; } #nav li.on{ border-bottom: solid 2px #ffffff; } .hide{ display: none; } .show{ display: block; }</style></head><script type="text/javascript"> /*window.onload=change; //js code implementation function change(){ this.nav=document.getElementById("nav"); this.li=nav.getElementsByTagName("li"); this.cont=document.getElementById("content"); this.divi=cont.getElementsByTagName("div"); for(var i=0;i<li.length;i++){ li[i].index=i; li[i].onclick=function(){ for(var i=0;i<li.length;i++){ li[i].className=""; divi[i].className="hide"; } li[this.index].className="on"; divi[this.index].className="show"; } }}*/$(function(){ $('#nav li').each(function(){ $(this).click(function(){ $('#nav li').removeClass("on"); $(this).addClass("on"); $("#content div").removeClass(); $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");})})})</script><body> <div> <div id="nav"> <ul> <li>num1</li> <li>num2</li> <li>num3</li> <li>num4</li> </div><div id="content"> <div>content1</div> <div>content2</div> <div>content3</div> <div>content4</div> </div> </div> </div></body></html>The above is all about this article, I hope it will be helpful to everyone's learning.