使用URL直接激活Bootstrap中的tabbable

撰写于 2013年8月5日 修改于 2021年3月11日 分类 编程杂记 标签 jQuery views

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存在的时候，才进行相应的激活操作。