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