javascript - 需要将 Prev/Next 切换添加到选项卡脚本

Question

这是我现有选项卡构建的 JS Fiddle:

http://jsfiddle.net/getpresto/89ZAG/1/

<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>

我需要的是能够添加一个最左边的按钮，使用户循环到左侧的下一个选项卡，并添加一个最右边的按钮，使用户循环到右侧的选项卡。如果用户到达任一端并继续单击相同的上一个或下一个选项，那么他们将简单地继续到选项卡的另一端。因此，如果他们在选项卡 1 上并单击左侧导航按钮，那么他们将转到选项卡 3 作为示例。

如何调整此脚本以包含此功能？感谢您的宝贵时间。

Answer 1

任何版本的基本步骤都是:

• 需要获取当前选中的tab索引，
• 用 +1 或 -1 改变它(取决于按下的按钮)，
• 然后根据标签的数量包装值，
• 然后更新当前选项卡。

如果你可以升级到 JS 1.9.1 或更高版本，这样的东西就可以工作了:

JSFiddle:http://jsfiddle.net/89ZAG/8/

$(document).ready(function () {
    var selectTab = function (delta) {
        //var index = $("#tabs .current").parent().index();
        var index = $("#tabs").tabs('option', 'active');
        var count = $("#tabs ul > li").length;
        index += delta;
        if (index < 0) {
            index = count - 1;
        }
        if (index >= count) {
            index = 0;
        }
        $('#tabs').tabs('option', 'active', index);
    };

    $("#tabs").tabs();
    $('#prev').click(function () {
        selectTab(-1);
    });
    $('#next').click(function () {
        selectTab(1);
    });
}); //end document ready

但 HTML 也需要重组以适应以后的 tabs 要求(面板选择器位于链接 href 属性中:

HTML:

<div id="tabs">
    <ul class="tabs header">
        <li><a href="#tab1">Tab 1</a>

        </li>
        <li><a href="#tab2">Tab 2</a>

        </li>
        <li><a href="#tab3">Tab 3</a>

        </li>
    </ul>
    <div class="panes" id="tab1">
        <!--Start Tab 1-->Tab 1 content.</div>
    <div class="panes" id="tab2">
        <!--End Tab 1 & Start Tab 2-->Tab 2 content.</div>
    <div class="panes" id="tab3">
        <!--End Tab 2 & Start Tab 3-->Tab 3 content.</div>
    <!--End Tab 3-->
    <!--End Panes-->
</div>
<input class="header" type="button" value="Prev" id="prev" />
<input class="header" type="button" value="Next" id="next" />

您需要设置这两个按钮的样式，使它们出现在您的选项卡旁边/上方。