首页 > 代码库 > bootstrap的胶囊式导航菜单
bootstrap的胶囊式导航菜单
从网上找到了一个胶囊式的导航菜单，但是运行之后发现，并不能实现切换的功能（选中另一个菜单，上一个菜单的高亮背景取消，新选中的菜单高亮背景显示），是因为缺少js实现切换功能，现在小编告诉大家如何使用js实现菜单切换。
原胶囊式菜单地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/
加入js能切换的代码：
<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="http://www.mamicode.com/#">Home</a></li>
<li><a href="http://www.mamicode.com/#">SVN</a></li>
<li><a href="http://www.mamicode.com/#">iOS</a></li>
<li><a href="http://www.mamicode.com/#">VB.Net</a></li>
<li><a href="http://www.mamicode.com/#">Java</a></li>
<li><a href="http://www.mamicode.com/#">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 href="http://www.baidu.com">百度</a></li> <li <?php if ($num!=0) echo ‘ class="active"‘?>><a href="http://www.baidu.com">腾讯</a></li>
这样的话就没有什么问题了。
bootstrap的胶囊式导航菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。