Bootstrap选项卡在使用Data-Target而不是HREF时的选项卡时不起作用

Posted 2023-02-19

【中文标题】Bootstrap选项卡在使用Data-Target而不是HREF时的选项卡时不起作用

【英文标题】：Bootstrap Tab is not working when tab with data-target instead of href

【发布时间】：2013-10-14 02:14:05

【问题描述】：

我正在开发引导选项卡，使用data-target 属性来匹配选项卡窗格，而不是使用href 属性，因为我正在开发角度应用程序（href 可能会破坏我的路线）。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
 </div>

<script>
    jQuery(function () 
        jQuery('#myTab a:last').tab('show')
    )
</script>

请看这个小提琴http://jsfiddle.net/xFW8t/4/。我在哪里重新创建了整体。

我不希望将引导样式应用于我的选项卡，我只想要功能，我希望应用我的样式，是否要停止应用引导样式？ 请在此提供帮助，提前感谢您的帮助。

【参考方案1】：

在您的标记中添加data-toggle="tab" 属性

<a data-target="#home" data-toggle="tab">Home</a>

Js Fiddle Demo

【讨论】：

感谢您的帮助。现在它正在工作。还有一个疑问，IE8是否支持data-toggle属性？

@MohamedHussain 在 twb 源代码中，他们使用 jQuery attr 函数来读取 data-attribute。大多数浏览器都应该支持这一点（我认为直到 IE6？），而且肯定是 IE8

感谢这个解决方案，让我免于发疯。

【参考方案2】：

试试这样：

jQuery(function () 
    jQuery('#myTab a').on('click', function() 
        $(this).tab('show');
    );
)

【参考方案3】：

正如@Sachin 所述，您必须指定data-toggle 属性。 除此之外，请确保您正确填写您的data-targets。当与 `data-target.(link) 一起使用时，它们采用 jQuery 选择器，not 元素 id。(link)

【参考方案4】：

如果你使用data-toggle="tab" - 你可以删除你的js初始化 -

<script>
    jQuery(function () 
        jQuery('#myTab a:last').tab('show')
    )
</script>

Bootstrap 会自动初始化标签页。

如果您想手动初始化标签 - 您可以从布局中删除 data-toggle="tab" 并分别在所有标签中：

$('#myTab a').click(function (e) 
    e.preventDefault();
    $(this).tab('show');
)