零基础建站培训教程介绍

当前位置:

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

相关教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程