0

I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).

<div>  
  <ul class="nav nav-pills pillstyle">
    <li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
  </ul>
</div>  <!-- nav pills close -->

<div class="tab-content">      
  <div id="apple" class="tab-pane fade in active"> `
 .... content of tabs.

JS

$(document).ready(function(){
$('#banana').tab('show');
});

or

 $(document).ready(function(){
 $('#banana').pill('show');
 });
Stu
  • 23
  • 2
  • 6

2 Answers2

0

@Stu Here you go.

HTML:

Assign an ID myTab to UL element. 

  <ul class="nav nav-pills pillstyle" id="myTab">

JS:

$(function () {
     $('#myTab a[href="#banana"]').tab('show');
});

Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding. http://getbootstrap.com/2.3.2/javascript.html#tabs

Working demo: https://jsfiddle.net/tf9k9j27/

Note: Just to answer your trial and error.

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)

pratikpawar
  • 2,038
  • 2
  • 16
  • 20
0

You just need to change your jQuery selector to address the a element instead of the tab-pane div.

$(document).ready(function(){
    $('a[href="#banana"]').tab('show');
});

If you need, you can find more detailed description about bootstrap tabs in the official documentation.

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • Yes! Thank You!!! This works perfectly! I had used the bootstrap documentation to get what I had. My JS is terrible so couldn't make the leap to using the anchor. – Stu Dec 28 '15 at 13:06