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