JavaScript编程实现tab选项卡切换的效果-蒲公英云

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

r囧r小猫 2024-03-24 15:34 145阅读 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"><!-- Area distribution //-->
    区域分布分析
    </div>
    <div class="hide" id="divZpTypeDistNow"><!-- Type distribution //-->
     产品类别分析
    </div>
</div>
</body>
</html>