本文實例為大家分享了js選項卡切換效果的具體實現代碼，供大家參考，具體內容如下
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>朱朱制作</title><script src="js/jquery.js" type="text/javascript"></script><style> *{ margin: 0; padding: 0; } body{ background-color: #fff; font-family: "微軟雅黑"; 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代碼實現 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 class="wrapper"> <div id="nav"> <ul> <li class="on">num1</li> <li>num2</li> <li>num3</li> <li>num4</li> </ul> </div><div id="content"> <div class="show">content1</div> <div class="hide">content2</div> <div class="hide">content3</div> <div class="hide">content4</div> </div> </div></body></html> 以上就是本文的全部內容，希望對大家的學習有所幫助。
