Multi navigation bar to switch

Often need to use multiple navigation bars, this time it should consider switching, and my use JS to write a simple switching method.
Here you can see that I have six navigation bar.
Here Insert Picture Description
Then I spent six to deal with a label corresponding to the six navigation

<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>

It took six A is click on the tab to switch to the corresponding navigation bar there
first gets to the A navigation bar with this tag

var Nav = document.getElementById("menu-top").getElementsByTagName("a");
var Tab = document.getElementById("main-wrapper").getElementsByClassName("tab");

Although this acquisition to six months A navigation bar labels but in order to have proof of other factors I gave him a staff judge
determines the length of the label is inconsistent if A is inconsistent returns the length of the navigation bar

if (Nav.length!=Tab.length) {
                return;
           	 }

Then began the cycle A tag

for (var i = 0; i < Nav.length; i++)

After the cycle is over for these A label that came with the click event,

Nav[i].onclick = function (){}

Then this cycle navigation bar inside the click event A label these cycle through the navigation bar gave Hide

for (var j = 0; j <Tab.length; j++) {
            Tab[j].style.display = "none";
           }

Then write out a click event parameter i received this received this parameter is used to click inside the event with

Nav[i].id = i;

Then click on the following events inside a for loop to write the code to display the navigation bar, click this event I let him finish equal circular navigation bar of the I

Tab[this.id].style.display = "block";

Complete the following JS code

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";
                }
            }

Guess you like

Origin blog.csdn.net/weixin_44486126/article/details/90286282