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

r囧r小猫 2024-03-24 15:34 51阅读 0赞

在编写“圳品”信息系统中，需要显示的内容较多，从上到下列出来的话看起来比较累，所以我们要将显示的内容分成若干类别并分别显示，这样就需要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">
    	区域分布分析
        </div>
    
        <div class="hide" id="divZpTypeDistNow">
    	 产品类别分析
        </div>
    </div>
    
    </body>
    </html>

运行效果如下：

![93e936a9cb0c472fa252b79473feccf0.gif][]

[93e936a9cb0c472fa252b79473feccf0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f02e75dc129e4decaa64c2c5d5603252.png