Question

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

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

我看了这个conversation on select with the tabs plugin，但不知道如何将它应用到我的情况中。我是jQuery的新手！我知道的越多，我就越想做，而且我知道的越少！我很感激任何建议!!

HTML：

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

jQuery的：

$(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 Tabs with Next/Previous

以下是有效的代码：

$(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 &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Back</a>");
        }
    });
    $('.next-tab, .prev-tab').click(function() { 
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    });
});

它有什么好处，它找到div的数量（为每个标签提供内容），然后以编程方式附加下一个/上一个按钮，跳过第一个按钮和最后一个按钮。

效果很好！

jQuery：标签的上一个/下一个链接不起作用！

2 个答案: