jQuery：上一个/下一个选项卡链接不起作用！

Question

我添加了按钮，并将上一个和下一个链接的 href 设置为列表项中的 href。当我单击上一个或下一个时，链接在浏览器中看起来正确，但它们会转到同一页面而不是指定的选项卡。

我有十几个带有选项卡的表单，每个表单都有不同数量的选项卡。这些选项卡是静态的（不是用 AJAX 拉入的），我真的很想动态设置它们的 href，而不是像下面那样布置每个选项卡。 （每个选项卡都有一个以 subform 开头的 id。

我查看了这个 关于使用选项卡插件进行选择的对话，但不确定如何将其应用到我的情况。我对 jQuery 真的很陌生！我知道的越多，我想做的就越多似乎我知道的更少！我很感激任何

建议

<ul class="tabNavigation">
    <li class="tabs-selected">
        <a href="#tab_1">Organization</a></li>
    <li><a href="#tab_2">Leaders</a> </li>
    <li><input type="submit" name="submit" value=" Save " /></li>
</ul>

<!-- tab containers -->
<div class="tabs-container" id="tab_1">
    <div class="subform" id="subform1">
        <? include_once ('org.php'); ?>                   
    </div>
</div>

<div class="tabs-container" id="tab_2">
    <div class="subform" id="subform2">
        <? include_once ('event.php'); ?>                   
    </div>
</div>

！

$(document).ready(function() { 
    //add previous/next buttons to bottom of each subform
    $(".subform").append('<div id="nav_buttons"><p><a href="" class="previous floatleft">Previous</a> <a href="" class="next floatright">Next</a></p></div>');

    $("#subform1 .previous").hide(); //hide previous button on tab_1 
    $("#subform1 a.next").attr("href","#tab_2");
    $("#subform2 a.previous").attr("href","#tab_1");
    $("#subform2 .next").hide(); //hide next button on last tab

});

Answer 1

我认为你可以利用所选的属性：

$("a.next").click(function() {
    $("#tabNavigation").tabs("select",  
         $("#tabNavigation").tabs("option", "selected") + 1
    );
});


$("a.prev").click(function() {
    $("#tabNavigation").tabs("select", 
        $("#tabNavigation").tabs("option", "selected") - 1
     );
});

Answer 2

我在 Cris Coyier 的网站 CSS-Tricks 上找到了答案。文章 带有下一个/上一个的 jQuery UI 选项卡

这里是有效的代码：

$(function() {
    var $tabs = $('.form-tabs').tabs();
    $(".tabs-container").each(function(i){
        var totalSize = $(".tabs-container").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Continue »</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Back</a>");
        }
    });
    $('.next-tab, .prev-tab').click(function() { 
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    });
});

它最酷的地方在于它找到 div 的数量（为每个选项卡提供内容），然后以编程方式附加下一个/上一个按钮，跳过第一个上一个按钮和最后一个下一个按钮。

效果很好！