例如这样的一个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)

解决Twitter Bootstrap Tab URL链接问题的更多相关文章

  1. iOS解析新浪微博的@##以及URL链接并展示

    最近在做一个跟微博相关的应用.其中涉及到了对微博中@.##以及URL链接的解析与展示.分享一下个人处理的方式,希望对需要的人有所帮助. 最终的展现效果: 首先,第一步是你得从纯文本中找到它们.毫无疑问 ...

  2. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  3. Twitter Bootstrap

    Twitter Bootstrap是一个HTML/CSS/JS框架,适用于移动设备优先的响应式网页开发.主要涉及: HTML:为已有的H5标签扩展了自定义属性 data-* CSS : Reset + ...

  4. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  5. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  6. Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发

    Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...

  7. 11款扁平化设计的 Twitter Bootstrap 主题和模板

    扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...

  8. 免费下载!Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

  9. URL链接中文参数乱码的若干处理方法

    JAVA 中URL链接中文参数乱码的若干处理方法,现在整理收录如下: 方法一: (1) JS中,在URL参数中确保用UTF-8编码,用js函数encodeURI()编码,例如 url:"xx ...

随机推荐

  1. android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)

    写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载   zbarLib编译project  project下载0积分 bug 在2.3的系统中Hol ...

  2. 获取用户ip接口

    <script type="text/javascript" charset="gb2312" src="http://counter.sina ...

  3. 【转】java静态代码块和构造方法执行顺序

    先看看下面几个类,然后判断它们的输出public class A { static{System.out.print(1);}public A(){System.out.print(2);}} pub ...

  4. Python中作用域的特别之处

    def a(): a = [] def aappend(): a.append(1) aappend() print a def b(): b = 1 def bchange(): b += 1 # ...

  5. fedora 23中配置tftp-server

    fedora 23中配置tftp-server */--> fedora 23中配置tftp-server Table of Contents 1. 简介 2. tftp安装 3. 启动和允许 ...

  6. 用指令修改DOM

    对于HTML5,input元素有autofocus这个属性,用户在第一次进入界面时就可以和用户交互,对于浏览器来说,可以 把键盘焦点定位在某个元素上,但是对于非input元素,则不可以,我们可以使用指 ...

  7. Python基础:1.数据类型(空、布尔类型、整型、长整型、浮点型、字符串)

    提示:python版本2.7,windows系统 Python提供的基本数据类型:空.布尔类型.整型.长整型.浮点型.字符串.列表.元组.字典.日期 1.空(None) None,是一个特殊的值,不能 ...

  8. Python 基础【第九篇】运算

    Python的运算符比较通俗和其他语言的几乎没什么区别 一.算数运算符 " + " 加法运算 >>> 1+3 4 加法运算扩展 "增强赋值操作" ...

  9. background不能填充margin的问题

    CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色.background-image: 引用图片作为背景.background- ...

  10. Chomp!游戏 (组合游戏Combinatorial Games)

    http://blog.csdn.net/acdreamers/article/details/17021095 有一个n*m的棋盘,每次可以取走一个方格并拿掉它右边和上面的所有方格.拿到左下角的格子 ...