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