js Tab选项卡教程_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js Tab选项卡教程

来源：未知作者：类型：图文教程点击次数：发布时间：2016-03-01 18:56:11

js tab选项卡效果图

先运行下面的代码查看效果：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS tab选项卡教程</title> <style type="text/css"> .box { width: 750px; height: 450px; font-family: 'microsoft yahei'; } h1 { width: 750px; margin: 0px; padding: 0px; border-bottom: 1px #CCCCCC solid; font-size: 100%; font-weight: normal; position: relative; float: left; } h1 a { width: 90px; height: 40px; text-align: center; text-decoration: none; position: relative; line-height: 40px; float: left; bottom: -2px; color: #333; } h1 a:hover { height: 38px; border-bottom: 2px #188eee solid; } .now { height: 38px; border-bottom: 2px #188eee solid; } #content div { display: none; } #content .show { display: block; } </style> </head> <body> <div class="box"> <h1 id="nav1"><a href="" class="now">推荐</a><a href="">设计制作</a><a href="">编程开发</a><a href="">最新发布</a> </h1> <div id="content"> <div id="tab1" class="show"><img src="http://www.5imoban.net/view/demoimg/1(1).png"></div> <div id="tab2"><img src="http://www.5imoban.net/view/demoimg/2(1).png"></div> <div id="tab3"><img src="http://www.5imoban.net/view/demoimg/3(1).png"></div> <div id="tab4"><img src="http://www.5imoban.net/view/demoimg/4(1).png"></div> </div> </div> <script type="text/javascript"> //获取h1这个对象 var nav1 = document.getElementById("nav1"); //获取h1下面所有的a var as = nav1.getElementsByTagName("a"); //获取所有要切换的内容 var content = document.getElementById("content"); var tabs = content.getElementsByTagName("div"); for(var i=0; i<as.length; ++i){ as[i].index = i; as[i].onmouseover = function(){ ini(); this.className = 'now' ; tabs[this.index].className = 'show'; } } //判断，上一个是谁？只需取消上一个的，添加这一个的，而不是全部初始化。 //循环上百次这个就不是好方案； function ini(){ for(var i=0; i<as.length; ++i){ as[i].className = ''; } for(var j=0; j<tabs.length; ++j){ tabs[j].className = ''; } } </script> </body> </html>
提示：您可以先修改部分代码再运行

js tab选项卡原理就是，鼠标移动到tab列表项上，通过js循环，先将所有的tab列表项的样式去除，再将tab内容项的样式去除，然后获取鼠标当前所在列表项的索引值，根据这个，分别给予对应的列表项和内容加上样式。