Javascript Bootstrap .tab('show') 不适用于我的代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32036576/
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('show') not working for my code
提问by Debiprasad
Here is my Code on JSFiddle
$('button').click(function() {
$('#passive_order_categories').tab('show');
});<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>Can't figure out why is Bootstrap .tab('show')not working for my code.
无法弄清楚为什么Bootstrap .tab('show')不适用于我的代码。
回答by fuyushimoya
From Bootstrap#tabs, what the target to trigger is the tabthat we clicked to show the contents, not the content itself.
从Bootstrap#tabs 中，要触发的目标是tab我们单击以显示内容，而不是内容本身。
You should give the second tab that links to the passive_order_categoriesan id, or use ul.nav-tabs li:eq(1)to get the second liin the list.
您应该提供链接到passive_order_categoriesid的第二个选项卡，或用于ul.nav-tabs li:eq(1)获取li列表中的第二个选项卡。
Or use a[href="#passive_order_categories"]to get the anchor related to that content page.
或用于 a[href="#passive_order_categories"]获取与该内容页面相关的锚点。
Then apply the .tab('show')on it, not on $('#passive_order_categories')
然后应用.tab('show')它，而不是$('#passive_order_categories')
$('button').click(function() {
// Find the target tab li (or anchor) that links to the content you want to show.
$('a[href="#passive_order_categories"]').tab('show');
//$('ul.nav-tabs li:eq(1)').tab('show');
});<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>