基于javascript实现最简单的选项卡切换效果

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助。