本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="https://www.jb51.net/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> <div> <ul> <li>num1</li> <li>num2</li> <li>num3</li> <li>num4</li> </ul> </div><div> <div>content1</div> <div>content2</div> <div>content3</div> <div>content4</div> </div> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章: