解决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利用zbar二维码扫描-(解决中文乱码及扫描区域定义)
写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载 zbarLib编译project project下载0积分 bug 在2.3的系统中Hol ...
- 获取用户ip接口
<script type="text/javascript" charset="gb2312" src="http://counter.sina ...
- 【转】java静态代码块和构造方法执行顺序
先看看下面几个类,然后判断它们的输出public class A { static{System.out.print(1);}public A(){System.out.print(2);}} pub ...
- Python中作用域的特别之处
def a(): a = [] def aappend(): a.append(1) aappend() print a def b(): b = 1 def bchange(): b += 1 # ...
- fedora 23中配置tftp-server
fedora 23中配置tftp-server */--> fedora 23中配置tftp-server Table of Contents 1. 简介 2. tftp安装 3. 启动和允许 ...
- 用指令修改DOM
对于HTML5,input元素有autofocus这个属性,用户在第一次进入界面时就可以和用户交互,对于浏览器来说,可以 把键盘焦点定位在某个元素上,但是对于非input元素,则不可以,我们可以使用指 ...
- Python基础:1.数据类型(空、布尔类型、整型、长整型、浮点型、字符串)
提示:python版本2.7,windows系统 Python提供的基本数据类型:空.布尔类型.整型.长整型.浮点型.字符串.列表.元组.字典.日期 1.空(None) None,是一个特殊的值,不能 ...
- Python 基础【第九篇】运算
Python的运算符比较通俗和其他语言的几乎没什么区别 一.算数运算符 " + " 加法运算 >>> 1+3 4 加法运算扩展 "增强赋值操作" ...
- background不能填充margin的问题
CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色.background-image: 引用图片作为背景.background- ...
- Chomp!游戏 (组合游戏Combinatorial Games)
http://blog.csdn.net/acdreamers/article/details/17021095 有一个n*m的棋盘,每次可以取走一个方格并拿掉它右边和上面的所有方格.拿到左下角的格子 ...