CODEWITHSUNDEEP
javascriptjqueryhtml
Chaitanya Deshpande
Chaitanya Deshpande

Reputation: 21

Select tab using jquery

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?

Upvotes: 2

Views: 852

Answers (1)

Giovanni Mazzuoccolo
Giovanni Mazzuoccolo

Reputation: 91

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 );

Upvotes: 1

Related Questions