例如这样的一个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. Swift概览

    <pre name="code" class="objc">转自:http://letsswift.com/2014/06/swift_overvi ...

  2. 深入理解C++中的mutable关键字

      mutalbe的中文意思是“可变的,易变的”,跟constant(既C++中的const)是反义词. 在C++中,mutable也是为了突破const的限制而设置的.被mutable修饰的变量,将 ...

  3. Android利用Looper在子线程中改变UI

    MainActivity如下: package cn.testlooper; import android.app.Activity; import android.os.Bundle; import ...

  4. 认识CoreData-多线程

    CoreData使用相关的技术点已经讲差不多了,我所掌握的也就这么多了.... 在本篇文章中主要讲CoreData的多线程,其中会包括并发队列类型.线程安全等技术点.我对多线程的理解可能不是太透彻,文 ...

  5. C++ (P199—P211)多态 虚函数 抽象类

    在介绍多态之前,先回忆:赋值兼容原则.虚基类.二义性.派生类如何给基类赋值等知识. 在赋值兼容原则中:父类对象的指针赋给基类的指针或者父类的对象赋给基类的引用,可以通过强转基类的指针或者引用变为父类的 ...

  6. Android自定义标题TitleView

    Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需 ...

  7. WebService地址变成计算机名的解决办法

    WCF 4.0 has solved this issue in some instances with a new config option that use Request Headers: & ...

  8. 圆满完成平安科技Web安全与App应用安全测试培训!

    圆满完成平安科技Web安全与App应用安全测试培训!

  9. Linux下编译安装redis,详细教程

    话不多说,直接开工 准备工作: 本人测试环境:Win10 虚拟机:VM Linux:CentOS5.5 (已搭建好LNMP环境) 软件包:redis-2.6.14.tar.gz (Linux下redi ...

  10. NetBeans自定义代码折叠块,类似vs中的#region

    //<editor-fold defaultstate="collapsed" desc="测试代码折叠"> echo '<script ty ...