解决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 ...
随机推荐
- android判断当前应用程序处于前台还是后台
/** *判断当前应用程序处于前台还是后台 * * @param context * @return */ public static boolean ...
- SAP ABAP MARD和MARDH计算逻辑
mard里记载的是当前库存的数量,但是期间并不一定是当月.比如你物料4月一整月都没有库存数量变化(没收没发),那么5月初你看mard里的条目期间数还是4月而非5月. 当某个期间发生货物移动的时候,系统 ...
- 文件I/O(不带缓冲)之read函数
调用read函数从打开文件中读数据. #include <unistd.h> ssize_t read( int filedes, void *buf, size_t nbytest ); ...
- Linux 服务器相关的一下链接
Apache 虚拟主机 VirtualHost 配置 以下是各操作系统的配置方法. Redhat Enterprise Linux Ubuntu Linux Windows Mac OS http:/ ...
- java_客户端防表单重复提交和服务器端session防表单重复提交
用户输入FormServlet链接 FormServlet-〉form.jsp->DoFormServlet FormServlet:产生token,放在session中 form.jsp:hi ...
- C++ (P160—)多继承 二义性 虚基类 “向上转型”
1 多继承中,必须给每个基类指定一种派生类型,如果缺省,相应的基类则取私有派生类型,而不是和前一个基类取相同的派生类型 2 一个类的保护成员只能被本类的成员函数或者它的派生类成员函数访问 3 由于c+ ...
- Convert Date between LocalDateTime
http://blog.progs.be/542/date-to-java-time Java8 has new date and time classes to “replace” the old ...
- IPC:shared memory
#include <stdio.h> #include <sys/shm.h> #include <sys/stat.h> int main () { int se ...
- [Oracle EBS R12]SQL Queries and Multi-Org Architecture in Release 12 (Doc ID 462383.1)
In this Document Abstract History Details Previous Releases Release 12 Multi-Org Session ...
- 记一次大量 TCP 连接失败
背景 在一段没有日志的历史遗留代码上面加入监控部署后不久,就收到了服务调用成功率低的告警,真是哗了狗了 解决过程 client端在线上单机部署,根据监控上面的返回码比例看出失败原因都是链接失败,通过 ...