How can I modify the script to have second tab (instead of first) as default when the page loads? Thanks..

<script>
$(function() {      
    $("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});
</script>

<!-- tab panes -->
<div id="panes">
    <div>
        <p>content1</p>
    </div>  
     <div>
        <p>content2</p>
     </div>     
</div>


 <!-- navigator -->
<div id="nav">
    <ul>        
        <li>
            <a href="#1">
                Tab1
            </a>
        </li>

        <li>
            <a href="#2">
                Tab2
            </a>

        </li>       
    </ul>
</div>

How can I modify the script to have second tab (instead of first) as default when the page loads? Thanks..

<script>
$(function() {      
    $("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});
</script>

<!-- tab panes -->
<div id="panes">
    <div>
        <p>content1</p>
    </div>  
     <div>
        <p>content2</p>
     </div>     
</div>


 <!-- navigator -->
<div id="nav">
    <ul>        
        <li>
            <a href="#1">
                Tab1
            </a>
        </li>

        <li>
            <a href="#2">
                Tab2
            </a>

        </li>       
    </ul>
</div>

• javascript
• jquery
• navigation

• Which jQuery plugin are you using? I don't believe there's enough code here to answer your question. – Dutchie432 Commented Jan 31, 2011 at 21:10
• no plugin - here is where I got it from flowplayer/tools/demos/tabs/skin4.htm – prat Commented Jan 31, 2011 at 21:26
• 1 You are not using a pure jQuery library. You're using something called 'jQuery Tools' which bines the jQuery 1.4.2 library with some plugins. So, yes, you are in fact using a plugin... somewhere. – Lance Commented Jan 31, 2011 at 21:45

3 Answers 3

Change your tabs to reflect the following

$(function() {      
    $("#nav ul").tabs("#panes > div", {initialIndex: 1, effect: 'fade', fadeOutSpeed: 400});
});

EDIT:

It looks as though your real question pertains to jQuery Tools rather than jQuery UI, as per your example you provided. I have therefore updated my code to match the jQuery Tools documentation found here. The issue is, jQuery UI uses something called selected to determine the zero-indexed initial tab shown. jQuery Tools by contrast uses something called initialIndex. You can find a working example of your code here.

Use the selected option.

<script>  
  $(function() {            
    $("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400, selected:1});  
});  
</script>

Check the URL:

http://docs.jquery./UI/Tabs#options

Just add `ui-tabs-selected to your second Tab.

<div id="nav">
  <ul>        
    <li>
        <a href="#1">
            Tab1
        </a>
    </li>

    <li class="ui-tabs-selected">
        <a href="#2">
            Tab2
        </a>

    </li>       
</ul>

But you have to do some additional css styling