從網上找到了一個膠囊式的導航菜單，但是運行之后發現，并不能實現切換的功能（選中另一個菜單，上一個菜單的高亮背景取消，新選中的菜單高亮背景顯示），是因為缺少js實現切換功能，現在小編告訴大家如何使用js實現菜單切換。
原膠囊式菜單地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/
加入js能切換的代碼：
<html>
<head>
<title>Bootstrap 實例 - 基本的膠囊式導航菜單</title>
<link >
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>基本的膠囊式導航菜單</p>
<ul class="nav nav-pills" id="list_1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<script>
window.onload=function(){
var ul=document.getElementById("list_1")
var li=ul.getElementsByTagName("li")
for(i=0;i<li.length;i++){
li[i].onclick=function(){
for(j=0;j<li.length;j++){
li[j].className=""
}
this.className="active"
}
}
}
</script>
</body>
</html>這樣就可以啦，但是有可能會有一個問題，就是<a></a>標簽中的鏈接為其他地址時，因為會跳轉到其他頁面，造成刷新，那么class="active"這個屬性還是會默認在原來設定的標簽上，這種情況下可以在<a></a>標簽中添加PHP代碼（如果是PHP中使用bootstrap的話，其他語言也可以相應的改），比如
<li <?php if ($num==0) echo ' class="active"'?>><a >百度</a></li> <li <?php if ($num!=0) echo ' class="active"'?>><a >騰訊</a></li>
這樣的話就沒有什么問題了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
