多导航栏切换
很多时候都需要用到多个导航栏,这时候就要考虑切换了,我这个用JS写了有简单的切换方法。
这里可以看到我这个有6个导航栏。
然后我用了6个a标签来处理对应的这6个导航栏
<ul id="menu-top" class="nav navbar-nav navbar-right">
<li><a href="javascript:;">我的桌面</a></li>
<li><a href="javascript:;">项目管理</a></li>
<li><a href="javascript:;">营销管理</a></li>
<li><a href="javascript:;">客户服务</a></li>
<li><a href="javascript:;">项目汇总</a></li>
<li><a href="javascript:;">基础设置</a></li>
</ul>
接下就是点击这6个A标签就切换去对应的导航栏那里
首先获取到这个导航栏跟这个A标签
var Nav = document.getElementById("menu-top").getElementsByTagName("a");
var Tab = document.getElementById("main-wrapper").getElementsByClassName("tab");
虽然获取到了这6个导航栏个A标签但是为了已防其他因素我给他员工判断
判断这个A标签的长度是否与导航栏的长度不一致如果不一致就返回
if (Nav.length!=Tab.length) {
return;
}
然后就开始循环这个A标签
for (var i = 0; i < Nav.length; i++)
循环完了之后给这些A标签附带上点击事件,
Nav[i].onclick = function (){}
然后在这个A 标签的点击事件里面循环这个导航栏,把这些循环完的导航栏都给隐藏
for (var j = 0; j <Tab.length; j++) {
Tab[j].style.display = "none";
}
接着在点击事件外面写一个接收i的参数这个接收到的这个参数就用来给点击事件里面用
Nav[i].id = i;
接着在点击事件里面for循环的下面写显示导航栏的代码,这个点击事件的I就让他等于导航栏的循环完的I
Tab[this.id].style.display = "block";
完整的JS代码如下
var Nav = document.getElementById("menu-top").getElementsByTagName("a");
var Tab = document.getElementById("main-wrapper").getElementsByClassName("tab");
if (Nav.length!=Tab.length) {
return;
}
for (var i = 0; i < Nav.length; i++) {
Nav[i].id = i;
Nav[i].onclick = function () {
for (var j = 0; j <Tab.length; j++) {
Tab[j].style.display = "none";
}
Tab[this.id].style.display = "block";
}
}