零基础建站培训介绍

当前位置:

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

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

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

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

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


<script>
//滑动门
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>

 <div class="mod02">
    <div class="hd">
      <ul class="tab">
        <li><a id="aa_btn_0" onmouseover="tabit(this, 2)" class="postion">行业新闻</a></li>
        <li><a id="aa_btn_1" onmouseover="tabit(this, 2)">申报动态</a></li>
      </ul>
      </div>
    <div class="bd">
      <div class="block_03" id="aa_div_0" style="display: block;">
        <ul class="list">
                  <li><span>2018-10-25</span><a href="#news/582.html" >企业有固定的经营场所</a></li>
                    <li><span>2018-10-25</span><a href="#news/575.html">办理劳务分包资质时注意事项是什么?</a></li>
                    <li><span>2018-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>2018-10-25</span><a href="#dongtai/584.html">齐全的广州建筑资质公司转让代办</a></li>
                  </ul>
      </div>
    </div>
  </div>

发表评论

零基础学建站就到学做网站论坛