How to set default tab on page load using jquery?

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>     开发者_如何学Go  
    </ul>
</div>

---

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.com/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