成都网站建设设计

将想法与焦点和您一起共享

bootstrap的胶囊式导航菜单-创新互联

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

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

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

加入js能切换的代码:



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





基本的胶囊式导航菜单

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

    >百度
    >腾讯

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

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


    当前文章:bootstrap的胶囊式导航菜单-创新互联
    文章URL:http://chengdu.cdxwcx.cn/article/gshpd.html