Question

i have this pretty well known script that i am trying to get working, at the moment it all works great, but when you first open the page it shows the first tab, as it should, what i want is it to show the second tab. (the first is just a mail compose tab, the second is the actual inbox)

Here is the javascript

    <script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

</script>

And here is the html for the tabs

> <ul class="tabs">
>     <li><a href="#compose" class="compose"></a></li>
>     <div id="mail_sidebar_top">
>         <li><a href="#inbox" class="inbox">Inbox(0)</a></li>
>         <li><a href="#sent_mail" class="sent_mail">Sent Mail(0)</a></li>
>         <li><a href="#trash" class="trash">Trash(0)</a></li>
>         <li><a href="#reported" class="reported">Reported</a></li>
>         <li><a href="#drafts" class="drafts">Drafts</a></li>
>         
>     </div><!---end mail_sidebar_top--->
>     
>     <div id="mail_sidebar_middle">
>         <li><a href="#notifications" class="notifications">Notifications</a></li>
>         <li><a href="#alerts" class="alerts">Alerts</a></li>
>         
>     </div><!---end mail_sidebar_top--->
>    
>     </ul>

Thanks for any and all help

Answer 1

In order to show the second tab, change these lines

   $("ul.tabs li:eq(1)").addClass("active").show(); //Activate second tab
   $(".tab_content:eq(1)").show(); //Show second tab content

Basically, in your current version, when the page is loaded, you add the active tab content and classes based on a jQuery selector. Because your html content is in the same order as the tabs, rather than using a selector for the first instance, (ie the :first), we can change it to :eq(1). (it’s one in this case, as jquery refers to the DOM elements in an array, so the first tab is at index 0, and the second is at index 1). To show a different tab at start, you would simply change the :eq(1) to :eq(n) where n is the array index of the tab you want.

EDIT An even better solution is to use the actual eq() function provided by jQuery as it adds a performance boost:

   $("ul.tabs li").eq(1).addClass("active").show(); //Activate second tab
   $(".tab_content").eq(1).show(); //Show second tab content