Question

我正在开发引导标签，使用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/。我重新创造了整体。

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

Answer 1

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

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

Js Fiddle Demo

Answer 2

尝试这样：

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

Answer 3

如@Sachin所述，您必须指定data-toggle属性。除此之外，请确保正确填写data-target。当与`data-target一起使用时，这些选择器采用非元素ID。（link）

Answer 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');
})

使用数据目标而不是href的选项卡时，Bootstrap选项卡不起作用

4 个答案: