当使用数据目标而不是href时，Bootstrap选项卡不起作用 [英] Bootstrap Tab is not working when tab with data-target instead of href

问题描述

我正在开发使用 data-target 属性的引导选项卡来匹配选项卡窗格，而不是使用 href 属性，因为我正在开发角度应用程序（ href 可能会破坏我的路线）。 code>< ul class =nav nav-tabsid =myTab>
< li class =active>< a data-target =home>主页< / a>< / li>
< li>< a data-target =profile>个人资料< / a>< / li>
< li>< a data-target =messages>消息< / a>< / li>
< li>< a data-target =settings>设置< / a>< / li>
< / ul>

< div class =tab-content>
< div class =tab-pane activeid =home> ...< / div>
< div class =tab-paneid =profile> ...< / div>
< div class =tab-paneid =messages> ...< / div>
< div class =tab-paneid =settings> ...< / div>
< / div>

< script>
jQuery（function（）{
jQuery（'＃myTab a：last'）。tab（'show'）
}）
< / script>

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

我不希望引导程序样式应用于我的选项卡，我只想要功能，我希望我的样式应用，是无论如何，停止引导样式应用？
请提前帮助我们提供帮助。

=tab属性在您的标记中

 < a data-target =＃home数据肘节= 标签 >家庭和LT; / A> 
  

Js Fiddle演示

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 ).

<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 .

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.

解决方案

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

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

Js Fiddle Demo

这篇关于当使用数据目标而不是href时，Bootstrap选项卡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！