使用URL直接激活Bootstrap中的tabbable

撰写于 2013年8月5日 修改于 2017年6月26日 分类 编程杂记 标签 jQuery

Bootstrap中的tabbable的确很好用,但是,tab-content不能直接使用url来定位,只能通过鼠标点击来激活。这成了一个限制,不过通过jquery可以轻松的来使用URL直接定位到tabbable中某个tab-content。

如果要实现通过URL来定位相应的tabbable的内容,那需要改变如下几个内容:

  • 删除现有导航和tab-content中class的active值
  • 为相应的导航控制添加一个active的class值
  • 为相应的tab-content添加一个active的class值
    下面的这个js函数可以实现如上的几个操作:
1
2
3
4
5
6
7
8
9
10
11
12
function navigateToTab() {
var TabId = window.location.hash.replace('#', '');
var isTabExists = ($(".tabbable li:contains('" + $("a[href=#" + TabId + "]").html() + "')").html());
if(TabId && undefined != isTabExists) {
//高亮相关连接
$(".tabbable ul li").removeClass('active');
$(".tabbable li:contains('" + $("a[href=#" + TabId + "]").html() + "')").addClass('active');
//呈现相关内容(tab-content)
$(".tab-content .tab-pane").removeClass('active');
$("#" + TabId).addClass('active');
}
}

将上面的函数,放到通用的js文件中,即可在URL后加#和相应的tab-content id来实现定位了。

更新:代码中增加了判断,只有#后面跟的tab-content id存在的时候,才进行相应的激活操作。

目录

Site by Stiekel using Hexo & Random
© 2010 - 2017

不可能不确定的博主是一名 JavaScript 程序员。

Hide