解决Twitter Bootstrap Tab URL链接问题
2015-05-29 00:00
501 查看
例如这样的一个Tabs 代码:
你可以激活标签通过以下几个方式:
<ul class="nav nav-tabs" id="myTab"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#profile">Profile</a></li> <li><a data-toggle="tab" href="#settings">Settings</a></li> </ul>
解决方法
在Tabs 页面加入如下的脚本即可通过#tag 描点链接到某个具体的Tab 页面:$(function(){ // Javascript to enable link to tab var url = document.location.toString(); if (url.match('#')) { $('#myTab a[href=#'+url.split('#')[1]+']').tab('show') ; } // Change hash for page-reload $('#myTab a').on('shown', function (e) { window.location.hash = e.target.hash; }); })
Twitter Bootstrap Tab 基本使用方法
通过JavaScript启用标签(每个选项卡需要激活单独):$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); });
你可以激活标签通过以下几个方式:
('#myTab a[href="#profile"]').tab('show'); // Select tab by name $('#myTab a:first').tab('show'); // Select first tab $('#myTab a:last').tab('show'); // Select last tab $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
相关文章推荐
- 35 个必须有的Bootstrap工具和生成器
- bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上)
- Bootstrap 学习笔记 之网格系统
- angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习
- 12个Web设计师必备的Bootstrap工具
- 12个Web设计师必备的Bootstrap工具
- Themes & templates - Page 2 - Popular | WrapBootstrap - Bootstrap Themes & Templates
- A real ROCA using Bootstrap, jQuery, Thymeleaf, Spring HATEOAS and Spring MVC
- bootstrap表格
- 更改bootstrap-datetimepicker弹出日期选择框只能在下方的限制
- Bootstrap--模仿官网写一个页面
- Bootstrap 栅格系统
- bootstrap 学习笔记 轮播(Carousel)插件
- bootstrap-datetimepicker bootstrap选择日期
- Bootstrap基本
- bootstrap css排版
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
- MVC5 + EF6 + Bootstrap3 (16) 客户端验证
- MVC5 + EF6 + Bootstrap3 (16) 客户端验证
- bootstrap学习笔记 插件概述