bootstrap的膠囊式導航菜單

時間 2020-03-31

原文原文鏈接

從網上找到了一個膠囊式的導航菜單，可是運行以後發現，並不能實現切換的功能（選中另外一個菜單，上一個菜單的高亮背景取消，新選中的菜單高亮背景顯示），是由於缺乏js實現切換功能，如今小編告訴你們如何使用js實現菜單切換。
php

原膠囊式菜單地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/css

加入js能切換的代碼：html

<html>
<head>
<title>Bootstrap 實例 - 基本的膠囊式導航菜單</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<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的話，其餘語言也能夠相應的改），好比jquery

<li <?php if ($num==0) echo ' class="active"'?>><a href="http://www.baidu.com">百度</a></li>
<li <?php if ($num!=0) echo ' class="active"'?>><a href="http://www.baidu.com">騰訊</a></li>

這樣的話就沒有什麼問題了。
bootstrap