35

我正在开发引导选项卡，使用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/。我在哪里重新创建了整个 .

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

4

4 回答 4

52

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

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

Js 小提琴演示

于 2013-10-07T13:25:29.943 回答
2

试试这样：

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})
于 2013-10-07T13:24:06.780 回答
2

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

于 2013-10-07T13:32:13.110 回答
1

如果你正在使用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');
})
于 2014-12-03T14:25:56.360 回答