多导航栏切换

很多时候都需要用到多个导航栏，这时候就要考虑切换了，我这个用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";
                }
            }

猜你喜欢