滑动门Tab选项卡通用JS代码

在之前的建站教程中，我们介绍了简单易用jquery实现tab栏标签切换菜单代码，这个代码特别简洁好用。今天给学习怎么建网站的学员带带一款滑动门Tab选项卡通用JS代码。

这款代码无需引用JQUERY，直接使用原生JS来制作滑动门Tab选项卡。效果如下：

滑动门Tab选项卡通用JS代码如下：

<style>

ol,ul,li{list-style:none;}

.clearfix:after {clear: both;content: ".";display: block;height: 0;font-size: 0;visibility: hidden;}

.clearfix {*zoom:1;}

.bd{border:1px solid #ddd;padding:10px;}

.mod02{border:1px solid #ddd;width:500px;padding:10px;}

.tab li a{display:block;float:left;padding:3px 5px;margin-right:5px;border:1px solid #ddd;border-radius:3px;}

.tab li a.postion{background:red;color:#fff;}

</style>





 <div class="mod02">

    <div class="hd">

      <ul class="tab clearfix">

        <li><a id="aa_btn_0" onmouseover="tabit(this, 4)" class="postion">行业新闻</a></li>

        <li><a id="aa_btn_1" onmouseover="tabit(this, 4)">申报动态</a></li>

         <li><a id="aa_btn_2" onmouseover="tabit(this, 4)">最新资讯</a></li>

         <li><a id="aa_btn_3" onmouseover="tabit(this, 4)">公司条例</a></li>

      </ul>

      </div>

    <div class="bd">

      <div class="block_03" id="aa_div_0" style="display: block;">

        <ul class="list">

                  <li><span>2019-10-25</span><a href="#news/582.html" >企业有固定的经营场所</a></li>

                    <li><span>2019-10-25</span><a href="#news/575.html">办理劳务分包资质时注意事项是什么？</a></li>

                    <li><span>2019-10-25</span><a href="#news/578.html">江苏施工资质公司转让落地</a></li>

                  </ul>

      </div>

      <div class="block_03" id="aa_div_1" style="display: none;">

        <ul class="list">

                    <li><span>2019-10-25</span><a href="#dongtai/584.html">齐全的广州建筑资质公司转让代办</a></li>

                  </ul>

      </div>

      <div class="block_03" id="aa_div_2" style="display: none;">

        <ul class="list">

                    <li><span>2019-10-25</span><a href="#dongtai/584.html">最新资讯最新资讯最新资讯最新资讯</a></li>

                  </ul>

      </div>

      <div class="block_03" id="aa_div_3" style="display: none;">

        <ul class="list">

                    <li><span>2019-10-25</span><a href="#dongtai/584.html">公司条例公司条例公司条例公司条例</a></li>

                  </ul>

      </div>

    </div>

  </div>

  

  

  <script>

//滑动门 代码来源：学做网站论坛https://www.xuewangzhan.com/

function tabit(btn, n){

var idname = new String(btn.id);

var s = idname.indexOf("_");

var e = idname.lastIndexOf("_") + 1;

var tabName = idname.substr(0, s);

var id = parseInt(idname.substr(e));

for (i=0; i<n; i++){

document.getElementById(tabName + "_div_" + i).style.display = "none";

document.getElementById(tabName + "_btn_" + i).className = '';

};

document.getElementById(tabName+"_div_"+id).style.display = "block";

btn.className = "postion";

};



function tab (num1, num2, cnt)

{

    document.getElementById("tab" + num1 + "_" + num2).style.display    = "block";

    document.getElementById("menu" + num1 + "_" + num2).className       = "current";



    for(i = 1; i <= cnt; i++)

    {

        if(i != num2)

        {

            document.getElementById("tab" + num1 + "_" + i).style.display = "none";

            document.getElementById("menu" + num1 + "_" + i).className = "normal";

        }

    }

}



</script>