jquery - 如何手动激活 Twitter Bootstrap 选项卡

Question

使用 Twitter Bootstrap 的 [Tabbable Tabs][1]，它说：

“通过 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)

当我单击每个选项卡并将其#id 显示在 URL 中时，如何单独激活每个选项卡？

Answer 1

这是在 url 中添加哈希，您可以添加以下内容：

$('a').click(function(e){

e.preventDefault();
if(window.location.hash) window.location.hash = '';
window.location.hash = $(e.target).attr('class'); //or id, or other attribute

});

当用户单击“a”标签（或您的标签 ID 等）时，然后删除以前的哈希并附加新的哈希。基本上使用window.location.hash。

Answer 2

在位置 url 中正确显示哈希的方法是删除该e.preventDefault();行。我假设您的 A 标签指向 #hash_tags ，如下所示：<a href="#mytasks">My Tasks</a>。这是我如何使用 jQuery 激活引导选项卡的示例：

$('#tabs li a').each(function () {
  $(this).click(function (e) {
    $(this).tab("show");
  });
});