使用URL直接激活Bootstrap中的tabbable

撰写于 2013年8月5日 修改于 2016年7月23日 分类 前端代码与禅 标签 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 Yifei Zhang using Hexo & Random

Yifei Zhang的博主是一名Node.js程序员,博客的内容会涉及电影 / 生活 / 吐槽 / JavaScript / PHP / Node.js / Express / MongoDB / MySQL / Redis / AngularJS / jQuery / HTML。

Hide