Select tab using jquery

Question

I have used jquery tab into my UI. what I need to do is, I need to select the second tab when the page gets loaded. By default it is opening the tag with class="Active". But rather than opening the contents of Active tag I want to open content of another tag. How do i do this. Here is my tab code in html:

<div class="typo">
    <div class="container-fluid">

        <div class="Buttons">
            <!--  <h3 class="ghj"><p align="center">Modules</p></h3>-->
             <h1>
                <ul class="nav nav-tabs">
                  <li class="active"><a data-toggle="tab" href="#Basic" class="btn btn-info" role="button">Data Preprocessing</a></li>
                  &nbsp; &nbsp; &nbsp;
                  <li><a data-toggle="tab" href="#WGCNA" class="btn btn-info" role="button">WGCNA</a></li>
                  &nbsp; &nbsp; &nbsp;
                  <li><a data-toggle="tab" href="#Custom" class="btn btn-info" role="button">Genome Mapping</a></li>
                  &nbsp; &nbsp; &nbsp;
                  <li><a data-toggle="tab" href="#RNA" class="btn btn-info" role="button">RNA Seq</a></li>
                  &nbsp; &nbsp; &nbsp;
                </ul>
             </h1>
           </div>
        </div>
    </div>

Here what i need to do is, I need to display the content of tab 'WGCNA' on page load. How do i achieve this?

Yes i tried setting Active to second using addClass method of jquery but after doing this I am getting blank page and the WGCNA tab is not getting Active neither do I get the content of it. — Chaitanya Deshpande, Mar 24 '16 at 09:15
check the SO http://stackoverflow.com/questions/15304027/how-to-change-tabs-programmatically-in-jquery-ui-1-9 — WhoAmI, Mar 24 '16 at 09:22
in case you need to swtich tab to `active` on page load, then set class directly in `html` code, without jquery — teran, Mar 24 '16 at 09:25
You could at least trigger a click on the other tab to open it on page load :D http://api.jquery.com/trigger/ — Tommy, Mar 24 '16 at 09:35

score 1 · Answer 1 · answered Mar 24 '16 at 09:26

You can programmatically open tabs using the tabs api.

There are two ways to achieve this.

You can do at the initialization passing the active option on start like this:

$( ".nav-tabs" ).tabs({
 active: 1
});

Remember it's zero-based.

Or setting the active option after the initialization:

$( ".nav-tabs" ).tabs( "option", "active", 1 );

Select tab using jquery

1 Answers1