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

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -