在编写“圳品”信息系统中，需要显示的内容较多，从上到下列出来的话看起来比较累，所以我们要将显示的内容分成若干类别并分别显示，这样就需要tab选项卡。
用JavaScript编程实现tab选项卡切换的效果，网上已经有很多现成的代码了。其要点是选项卡的标题使用ul..li来模拟，选项卡内容使用div来显示。
完整代码如下：
<!DOCTYPE html> <html> <head> <meta name="Author" content="PurpleEndurer"> <title>“圳品”信息系统</title> <style type="text/css"> *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} #tabs {width:1024px; padding:5px; height:850px; margin:20px;} #tabs ul {list-style:none; display: block; height:30px; line-height:30px; border-bottom:2px #33ffff solid;} #tabs ul li {background:#eee; cursor:pointer; float:left; list-style:none; height:28px; line-height:28px; margin:0px 3px; border:1px solid #aaaaaa; border-bottom:none; display:inline-block; width:180px; text-align: center; font-size: 15px;} #tabs ul li.show {background:#fff;border-top:2px solid #33ffff; border-left:2px solid #33ffff; border-right:2px solid #33ffff; border-bottom: 2px solid #fff; font-weight:bold; font-size: 20px;} #tabs div {height:800px; line-height: 25px; border:1px solid #33ffff; border-top:none; padding:5px;} .hide{display: none;} </style> <script type="text/javascript"> function initTab() { var oTab = document.getElementById("tabs"); var oUl = oTab.getElementsByTagName("ul")[0]; var oLis = oUl.getElementsByTagName("li"); var oDivs= oTab.getElementsByTagName("div"); for (var i= 0; i<oLis.length; i++) { oLis[i].index = i; oLis[i].onmousemove = oLis[i].onclick = function (){activeTab(this.index);}; } }//initTab() function activeTab(a) { var oTab = document.getElementById("tabs"); var oTabUl = oTab.getElementsByTagName("ul")[0]; var oTabLis = oTabUl.getElementsByTagName("li"); var oTabDivs = oTab.getElementsByTagName("div"); for (var n= 0; n < oTabLis.length; n++) { oTabLis[n].className = ""; oTabDivs[n].className = "hide"; }//for() oTabLis[a].className = "show"; oTabDivs[a].className = ""; } //activeTab(a) window.onload = function() { initTab(); } </script> </head> <body> <p>JavaScript编程实现tab选项卡切换的效果 @Edge浏览器</p> <div id="tabs"> <ul> <li class="show" title="符合条件的产品清单">清单</li> <li>区域分布分析</li> <li>产品类别分析</li> </ul> <div id="divZpList"> 符合条件的产品清单 </div> <div class="hide" id="divZpAreaDistNow"><!-- Area distribution //--> 区域分布分析 </div> <div class="hide" id="divZpTypeDistNow"><!-- Type distribution //--> 产品类别分析 </div> </div> </body> </html>
