Question

如何在页面加载时修改脚本以使第二个选项卡（而不是第一个）作为默认值？感谢..

<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

更改标签以反映以下内容

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

修改

根据您提供的示例，您的真实问题看起来好像是jQuery工具而不是jQuery UI。因此，我更新了我的代码以匹配here找到的jQuery Tools文档。问题是，jQuery UI使用名为selected的东西来确定显示的零索引初始选项卡。相比之下，jQuery Tools使用了一种名为initialIndex的东西。您可以找到代码here的实际示例。

Answer 2

使用所选选项。

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

检查网址：

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

Answer 3

只需将“ui-tabs-selected”添加到第二个标签页。

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

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

    </li>       
</ul>

但你必须做一些额外的CSS样式

如何使用jquery在页面加载上设置默认选项卡？

3 个答案: