switch tabs programmatically using javascript

Question

I have a html tabbed interface and I want to switch between different tabs based on the item selected in a Combobox using a function. I have tried different solution from previous related question on stackoverflow but none of them is working for me. Could someone please help me out on where I'm missing.

//code for tabs
<div class="container">
   <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Bio Data</a></li>
      <li><a data-toggle="tab" href="#menu1">Insurance Details</a></li>
      <li><a data-toggle="tab" href="#menu2">Credit Card Details</a></li>
      <li><a data-toggle="tab" href="#menu3">RTA</a></li>
   </ul>
   <div class="tab-content">
     <div id="home" class="tab-pane fade in active">
       <input name="surname" id="surname" type="text"  /><br />
       <input name="otherName" id="otherName" type="text" /><br />
     </div>
     <div id="menu1" class="tab-pane fade">
       <label for="scheme">Scheme Name:</label>
       <input name="scheme" id="scheme" type="text"  /><br />
       <label for="scheme_id">Scheme ID:</label>
       <input name="scheme_id" id="scheme_id" type="text" /><br />
     </div>
   </div>
</div>


 //script for switching tabs
     <script type="text/javascript" >
        function selectTab() {
          $("#container").tab("option", "active", 2);
          //$('#container a[href="#menu1"]')[2].click();
          //$("#menu1").click();
        }          
     </script>

I tried a number of options including the ones commented, but none worked. Please advise.

`$("#container").tab` seems to be using a plugin or jQuery UI. Is it included? Also should it not be `.tabs()` and not `.tab()` — mplungjan, Jan 04 '16 at 08:43
Also please link questions that you've used to find "different solution from previous related question" so we know what did not work for you. — Alexei Levenkov, Jan 04 '16 at 08:45
@mplungjan i only have css for the container class. do I need to post it? It's a relatively big css file. — Sam, Jan 04 '16 at 09:30
@AlexeiLevenkov Here are the links to the related questions i used before http://stackoverflow.com/questions/15304027/how-to-change-tabs-programmatically-in-jquery-ui-1-9 http://stackoverflow.com/questions/13722893/zurb-foundation-switching-tab-programmatically — Sam, Jan 04 '16 at 09:33

score 0 · Answer 1 · edited Jul 02 '19 at 18:02

you can use like this

jQuery code

$('.cont').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

})

html code

<div class="container-fluid">
  <ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li>
    <li><a href="#profile" data-url="/embed/62806/view">Profile</a></li>
    <li><a href="#messages" data-url="/embed/62807/view">Messages</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">This is the home pane...</div>
    <div class="tab-pane" id="profile"></div>
    <div class="tab-pane" id="messages"></div>
  </div>
</div>

switch tabs programmatically using javascript

1 Answers1