Question

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

<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>

我需要的是能够添加一个最左边的按钮，将用户循环到左边的下一个标签，以及一个最右边的按钮，将用户循环到右边的标签。如果用户到达任一端并继续单击相同的prev或next选项，则他们将继续直接到选项卡的另一端。因此，如果它们位于选项卡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" />

您需要设置两个按钮的样式，使它们显示在标签旁边/上方。

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

1 个答案:

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