web-dev-qa-db-ja.com

Bootstrap .tab（ 'show'）は私のコードでは機能しません

ここに私の 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>_

Bootstrap .tab('show')が私のコードで機能していない理由がわかりません。

javascripttwitter-bootstrap-3tabs
17
Debiprasad

Bootstrap＃tabs から、トリガーするターゲットは、コンテンツ自体ではなく、コンテンツを表示するためにクリックしたtabです。

_passive_order_categories_にリンクする2番目のタブにIDを指定するか、ul.nav-tabs li:eq(1)を使用してリストの2番目のliを取得する必要があります。

または、_a[href="#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>_
42
fuyushimoya