当使用数据目标而不是href选项卡时，Bootstrap选项卡不能工作

I am developing bootstrap tabs with the use of data-target attribute to match the tab panes instead of using the href attribute, since i am developing angular app(href might spoil my route ).

我正在开发bootstrap标签，使用数据目标属性来匹配标签窗格，而不是使用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>

Please see this fiddle http://jsfiddle.net/xFW8t/4/. Where i recreated the whole .

请参见这个小提琴http://jsfiddle.net/xFW8t/4/。我在那里重新创造了整个世界。

I don't want the bootstrap style to be applied for my tabs, i want only the functionality, i want my styles to applied , is it anyway to stop bootstrap style to be applied? Please help in this thanks in advance for any help.

我不想让bootstrap样式应用到我的选项卡上，我只想要功能，我想要应用我的样式，它会停止应用bootstrap样式吗?如有任何帮助，请提前表示感谢。

4 个解决方案

#1

Add data-toggle="tab" attribute in your markup

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

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

Js Fiddle Demo

Js小提琴演示

#2

try like this :

试试这样:

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

#3

As mentioned by @Sachin, you have to specify the data-toggle attribute. Other than that, make sure you correctly fill in your data-targets. These take jQuery selectors, not element ids, when used with `data-target.(link)

正如@Sachin提到的，您必须指定data-toggle属性。除此之外，确保你正确地填写了你的数据目标。当与“data-target”一起使用时，它们采用jQuery选择器，而不是元素id。

#4

If you are using data-toggle="tab" - you can remove your js initialization -

如果您正在使用data-toggle="tab" -您可以删除js初始化-

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

Bootstrap will init tabs automatically.

引导将自动初始化选项卡。

If you want to init your tabs maually - you can remove data-toggle="tab" from the layout and itin all tabs separately:

如果你想要在你的标签上显示你的标签，你可以从布局中删除数据切换="标签"，并在所有标签中分别显示:

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

#1