从网上找到了一个胶囊式的导航菜单，但是运行之后发现，并不能实现切换的功能（选中另一个菜单，上一个菜单的高亮背景取消，新选中的菜单高亮背景显示），是因为缺少js实现切换功能，现在小编告诉大家如何使用js实现菜单切换。

原胶囊式菜单地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/

加入js能切换的代码：

<html><head><title>Bootstrap实例-基本的胶囊式导航菜单</title><linkhref="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><scriptsrc="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><p>基本的胶囊式导航菜单</p><ulclass="navnav-pills"id="list_1"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">SVN</a></li><li><ahref="#">iOS</a></li><li><ahref="#">VB.Net</a></li><li><ahref="#">Java</a></li><li><ahref="#">PHP</a></li></ul><script>window.onload=function(){varul=document.getElementById("list_1")varli=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<?phpif($num==0)echo'class="active"'?>><ahref="http://www.baidu.com">百度</a></li><li<?phpif($num!=0)echo'class="active"'?>><ahref="http://www.baidu.com">腾讯</a></li>

这样的话就没有什么问题了。