如何使用jQuery设置页面加载的默认标签？

Question

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>

Answer 1

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 .

Answer 2

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

Answer 3

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