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

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

加入js能切换的代码:



Bootstrap 实例 - 基本的胶囊式导航菜单





基本的胶囊式导航菜单

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

    >百度
    >腾讯

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