JavaScript编程实现tab选项卡切换的效果-CFANZ编程社区

在编写“圳品”信息系统中，需要显示的内容较多，从上到下列出来的话看起来比较累，所以我们要将显示的内容分成若干类别并分别显示，这样就需要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>

运行效果如下：

JavaScript编程实现tab选项卡切换的效果_javascript