Jquery 和 twitter 引导程序使活动选项卡不起作用答案

【问题标题】：Jquery and twitter bootstrap make active tab doesnt workJquery 和 twitter 引导程序使活动选项卡不起作用
【发布时间】：2011-12-03 14:45:22
【问题描述】：

在 twitter 引导 js 选项卡中，我必须向 li 元素添加一个“活动”类。

我从 url 获取哈希值。我将活动类应用到选项卡，但它没有获得焦点。

我想让第二个标签页在 url 有一定的哈希值时激活。

源代码： http://jsfiddle.net/Chumillas/dU458/#example

【问题讨论】：

您的代码适用于我，但您没有将引导程序放入其中。
见管理资源(2)，我不明白你的意思
好的，我现在看到了。对不起我的错。

标签： jquery twitter-bootstrap

【解决方案1】：

还有最新的 bootstrap-tab.js，您可以使用以下调用来选择活动选项卡。

导航示例：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

通过链接获取对象并显示调用：

$('a[href="#tab2"]').tab('show');

最佳，G.

来源：Twitter Bootstrap

【讨论】：

如果您只使用 url 哈希来选择活动选项卡，您可以使用以下通用代码自动执行该过程： $(document).ready(function() { var url_hash = window.location.hash .split('-')[0]; if (url_hash[0] == '#') $('#tabs a[href="' + url_hash + '"]').tab('show'); });

【解决方案2】：

我解决了，我还需要将标签内容的 div 设置为活动状态。

【讨论】：

通常你可以使用$('#mytab a').first().tab('show')。如果事实证明您需要将 tab-content div 设置为 active，请检查您的 id 以获取您的标签头。 id 中可能有空格。

【解决方案3】：

你可以这样做：

$(function (e) {
  var parts = decodeURI(e.target).split('#');
  $(".tabs").tabs().select(parts[1]);
});

【讨论】：

【解决方案4】：

要使 Bootstrap 选项卡工作，您必须做两件事才能使选项卡处于活动状态：

将 li 元素设置为活动 (class="活动")
将标签 div 元素设置为活动（class="fade in active"）

【讨论】：

【解决方案5】：

你为什么不使用select 方法而不是自己更改类？？

检查一下，Selecting a jQuery Tab using a parameter in the URL

【讨论】：

对我不起作用：$('.tabs').tabs('select', 1);都不加载。
select 是 jQuery UI 选项卡的一项功能，但在 Twitter Bootstrap 选项卡中不可用。