javascript - Bootstrap .tab('show') not working for my code -
here 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 bootstrap .tab('show')
not working code.
from bootstrap#tabs, target trigger tab
clicked show contents, not content itself.
you should give second tab links passive_order_categories
id, or use ul.nav-tabs li:eq(1)
second li
in list.
or use a[href="#passive_order_categories"]
anchor related content page.
then apply .tab('show')
on it, not on $('#passive_order_categories')
$('button').click(function() { // find target tab li (or anchor) links content want 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>
Comments
Post a Comment