需要添加上一个/下一个切换标签脚本

Question

这是我现有标签构建的JS提琴:

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

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

• 你需要得到当前选定的标签索引，
• 用+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" />

你需要给这两个按钮设置样式，使它们出现在你的标签旁边/上面。