您的位置：首页 > Web前端 > BootStrap

bootstrap的胶囊式导航菜单

2016-11-25 11:21 323 查看
从网上找到了一个胶囊式的导航菜单，但是运行之后发现，并不能实现切换的功能（选中另一个菜单，上一个菜单的高亮背景取消，新选中的菜单高亮背景显示），是因为缺少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="#">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 href="http://www.baidu.com">百度</a></li>
<li <?php if ($num!=0) echo ' class="active"'?>><a href="http://www.baidu.com">腾讯</a></li>
这样的话就没有什么问题了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  标签 bootstrap 胶囊式
相关文章推荐
新的分享
章节导航