Html 使用数据目标而不是 href 的选项卡时，引导选项卡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19225968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tab is not working when tab with data-target instead of href
提问by Mohamed Hussain
I am developing bootstrap tabs with the use of data-targetattribute to match the tab panes instead of using the hrefattribute, since i am developing angular app(hrefmight spoil my route ).
我正在开发使用data-target属性匹配选项卡窗格而不是使用href属性的引导选项卡，因为我正在开发 angular 应用程序（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.
我不希望将引导程序样式应用于我的选项卡，我只想要功能，我希望应用我的样式，无论如何要停止应用引导程序样式吗？请提前提供帮助，感谢您的帮助。
回答by Sachin
Add data-toggle="tab"attribute in your markup
data-toggle="tab"在标记中添加属性
<a data-target="#home" data-toggle="tab">Home</a>
回答by Pascalz
try like this :
试试这样：
jQuery(function () {
jQuery('#myTab a').on('click', function() {
$(this).tab('show');
});
})
回答by Kippie
As mentioned by @Sachin, you have to specify the data-toggleattribute.
Other than that, make sure you correctly fill in your data-targets. These take jQuery selectors, notelement ids, when used with `data-target.(link)
正如@Sachin 所提到的，您必须指定data-toggle属性。除此之外，请确保正确填写您的data-targets。当与.( link)一起使用时，它们采用 jQuery 选择器，而不是元素 id`data-target
回答by Azee
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.
Bootstrap 将自动初始化选项卡。
If you want to init your tabs maually - you can remove data-toggle="tab"from the layout and itin all tabs separately:
如果您想手动初始化您的选项卡 - 您可以分别data-toggle="tab"从布局和所有选项卡中删除：
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
