Question

我希望用户能够点击后退/前进按钮在他们点击的标签之间移动，但是jquery ui的标签还没有完全支持。到目前为止我找到的唯一选项是http://www.asual.com/jquery/address/samples/tabs/

有没有更简单或更好的解决方案来实现这个？

Answer 1

最佳解决方案可能是实现哈希标记的解决方案，因为*大多数*浏览器在其历史记录中保存哈希标记（允许使用后退和前进按钮）。

我建议将每个标签设为带有哈希标记的链接，然后使用this plugin监听哈希更改事件，然后使用该事件调用函数。

例如：

HTML片段：

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

<div id="content">
    <div id="tab1" class="tab active">This is tab 1!</div>
    <div id="tab2" class="tab">This is tab 2!</div>
</div>

CSS片段：

#content{
    position:relative;
}
.tab{
    display:none;
    position:absolute;
    top:0px;
    right:0px;
}
.tab.active{
    display:block;
}

JavaScript代码段（使用jQuery;假设文档已准备好）：

$(window).hashchange(function(){ //Requires hashchange plugin
    $('#content .tab').removeClass('active'); //Make all tabs inactive
    $(location.hash).addClass('active'); //Activate the tab that has the same ID as the hash
});

通过一些调整，这可以实现您正在寻找的功能。

Answer 2

使用散列（＃）和javascripts本机历史记录的问题是，如果用户要单击包含散列的选项卡之外的其他链接，那么会破坏前进和后退按钮。

为了解决这个问题，请尝试将所有内容保存在jquery ui tabs对象，方法和事件中。 Jquery UI选项卡使用索引指定当前选项卡并更改选项卡。这是我用于前进和后退按钮的功能：

    /**
     * The jquery ui tab forward and back buttons. Remember to replace the
     * '#new-product-tab-container' below with the selector for your tab
     * 
     * @method
     * @public
     * @param {string} dir The direction. Either 'forward' or 'back'
     * @return void
     */
    function tab_nav(dir){

        //vars
        var currentIndex = new Number($('#new-product-tab-container').tabs("option","selected"));
        var newIndex = new Number(0);
        var total = new Number($('#new-product-tab-container .ui-tabs-nav > li').tabs().size());

        if(dir=='forward' && currentIndex < total) newIndex = (currentIndex+1) ;
        if(dir=='back' && currentIndex > 1) newIndex = (currentIndex-1);

        $('#new-product-tab-container').tabs("option","selected", newIndex);

    }

要使用此功能，请将其称为tab_nav('forward')或tab_nav('back')

希望这有助于某人;）

Answer 3

您可以使用

$("#tabs").tabs('select', 1);

请看这个工作示例：http://jsfiddle.net/n4mqC/

使用后退/前进按钮支持实现jquery ui tab的最佳方法是什么？

3 个答案:

HTML片段：

CSS片段：

JavaScript代码段（使用jQuery;假设文档已准备好）：