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

创新互联建站基于分布式IDC数据中心构建的平台为众多户提供成都棕树机房 四川大带宽租用 成都机柜租用 成都服务器租用。

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

加入js能切换的代码：

基本的胶囊式导航菜单

Home
SVN
iOS
VB.Net
Java
PHP

这样就可以啦，但是有可能会有一个问题，就是标签中的链接为其他地址时，因为会跳转到其他页面，造成刷新，那么class="active"这个属性还是会默认在原来设定的标签上，这种情况下可以在标签中添加PHP代码（如果是PHP中使用bootstrap的话，其他语言也可以相应的改），比如

>百度
>腾讯

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

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

当前文章：bootstrap的胶囊式导航菜单-创新互联
标题URL：http://myzitong.com/article/gshpd.html