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

简单的js tab选项卡小教程

来源：未知作者：类型：文章教程点击次数：发布时间：2016-08-09 13:04:18

非常简单，非常实用的js tab选项卡小教程，先运行下面的代码，查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>简单的js tab选项卡小教程 - 我爱模板网 www.5imoban.net</title> <style> #tabItem,#tabCon{width:400px; margin:auto; font-family:"微软雅黑";} #tabItem{border-bottom:2px solid #ccc; height:30px; line-height:30px;} #tabItem b{float:left; height:30px; padding:0 20px; background:#ccc; cursor:pointer; font-weight:normal;} #tabItem b.current{background:#1987BC; color:#fff;} #tabCon{border:2px solid #ccc; border-top:none; width:376px; padding:10px;} #tabCon li,#tabCon ul{list-style:none; padding:0; margin:0;} #tabCon li{height:25px; line-height:25px;} #tabCon li a{text-decoration:none; font-size:14px; color:#1987BC;} </style> </head> <body> <div id="tabItem"><b class="current">公司新闻</b><b>行业新闻</b></div> <div id="tabCon"> <ul> <li><a href="http://www.5imoban.net/PSDmoban/qiye/201607131732.html" target="_blank">空气净化企业公司简介页面PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/201607121730.html" target="_blank">扁平化培训公司企业网站PSD模板/a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/201607111729.html" target="_blank">漂亮的蛋糕公司网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/201607081728.html" target="_blank">扁平化系统集成公司企业网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/201607081727.html" target="_blank">影视公司5D电影专题页PSD网站模板</a></li> </ul> <ul style="display:none"> <li><a href="http://www.5imoban.net/cssmoban/qiye/20140822824.html" target="_blank">经典蓝色后台管理系统HTML模板</a></li> <li><a href="#" target="_blank">房地产网站后台管理系统html模板</a></li> <li><a href="http://www.5imoban.net/cssmoban/qiye/20140708731.html" target="_blank">精美的软件开发公司网站html模板</a></li> <li><a href="#" target="_blank">精致的网络公司网站div+css模板,网络公司css切图/a></li> <li><a href="#" target="_blank">简约家居网站css网站模板,静态家居网站模板</a></li> </ul> </div> <script> window.onload=function(){ var aTabItem=document.getElementById("tabItem").getElementsByTagName("b"); var aTabCon=document.getElementById("tabCon").getElementsByTagName("ul"); for(var i=0; i<aTabItem.length; i++){ aTabItem[i].index=i; aTabItem[i].onclick=function(){ for(var j=0; j<aTabItem.length; j++){ aTabItem[j].className=""; aTabCon[j].style.display="none"; } this.className="current"; aTabCon[this.index].style.display="block"; } } } </script> </body> </html>
提示：您可以先修改部分代码再运行

原理很简单，就是点击tab选项卡的选项，让它对应的内容显示，同时给该选项加上current样式。