解决Twitter Bootstrap Tab URL链接问题
例如这样的一个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链接问题的更多相关文章
- iOS解析新浪微博的@##以及URL链接并展示
最近在做一个跟微博相关的应用.其中涉及到了对微博中@.##以及URL链接的解析与展示.分享一下个人处理的方式,希望对需要的人有所帮助. 最终的展现效果: 首先,第一步是你得从纯文本中找到它们.毫无疑问 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- Twitter Bootstrap
Twitter Bootstrap是一个HTML/CSS/JS框架,适用于移动设备优先的响应式网页开发.主要涉及: HTML:为已有的H5标签扩展了自定义属性 data-* CSS : Reset + ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...
- 免费下载!Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
- URL链接中文参数乱码的若干处理方法
JAVA 中URL链接中文参数乱码的若干处理方法,现在整理收录如下: 方法一: (1) JS中,在URL参数中确保用UTF-8编码,用js函数encodeURI()编码,例如 url:"xx ...
随机推荐
- Swift概览
<pre name="code" class="objc">转自:http://letsswift.com/2014/06/swift_overvi ...
- 深入理解C++中的mutable关键字
mutalbe的中文意思是“可变的,易变的”,跟constant(既C++中的const)是反义词. 在C++中,mutable也是为了突破const的限制而设置的.被mutable修饰的变量,将 ...
- Android利用Looper在子线程中改变UI
MainActivity如下: package cn.testlooper; import android.app.Activity; import android.os.Bundle; import ...
- 认识CoreData-多线程
CoreData使用相关的技术点已经讲差不多了,我所掌握的也就这么多了.... 在本篇文章中主要讲CoreData的多线程,其中会包括并发队列类型.线程安全等技术点.我对多线程的理解可能不是太透彻,文 ...
- C++ (P199—P211)多态 虚函数 抽象类
在介绍多态之前,先回忆:赋值兼容原则.虚基类.二义性.派生类如何给基类赋值等知识. 在赋值兼容原则中:父类对象的指针赋给基类的指针或者父类的对象赋给基类的引用,可以通过强转基类的指针或者引用变为父类的 ...
- Android自定义标题TitleView
Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需 ...
- WebService地址变成计算机名的解决办法
WCF 4.0 has solved this issue in some instances with a new config option that use Request Headers: & ...
- 圆满完成平安科技Web安全与App应用安全测试培训!
圆满完成平安科技Web安全与App应用安全测试培训!
- Linux下编译安装redis,详细教程
话不多说,直接开工 准备工作: 本人测试环境:Win10 虚拟机:VM Linux:CentOS5.5 (已搭建好LNMP环境) 软件包:redis-2.6.14.tar.gz (Linux下redi ...
- NetBeans自定义代码折叠块,类似vs中的#region
//<editor-fold defaultstate="collapsed" desc="测试代码折叠"> echo '<script ty ...