Question

我有一个用jQuery UI Tabs构建的滑块：

<section id="featured">
    <aside id="sidebar">
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
                <a href="#panel_1">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_2">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_3">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_4">[Tab Heading]</a>
            </li>
        </ul>
    </aside>
    <section id="rotate_me">
        <div class="featured_panel" id="panel_1">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_2">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_3">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_4">
            <p>[Tab Content]</p>
        </div>
    </section>
    <script>$('#featured').tabs('rotate', 4000, false);</script>

客户希望标签只旋转第一个和第二个标签。

我在show事件中添加了一个函数：

.tabs({
    show: function(event, ui) {
        var selected = $( ".selector" ).tabs( "option", "selected" );
        if (selected == 3) {
            $( "#featured" ).tabs( "option", "selected", 1 );
        }
    }
})

但这没有做任何事。

我知道如何让滑块只旋转第一个和第二个标签吗？

Answer 1

selected选项仅适用于初始化。您只需触发第一个选项卡上的单击即可。

$("#featured li.ui-tabs-nav-item:first").trigger("click");

如何在jQuery选项卡旋转上触发事件？

1 个答案: