Question

I added the buttons and set the hrefs for previous and next links to the hrefs from the list items. The links look right in the browser when I click on previous or next, but they go to the same page instead of the specified tab.

I have a dozen of these forms with the tabs and each form has a different number of tabs. The tabs are static (not pulled in with AJAX), and I’d really like to set their hrefs dynamically instead of laying out each one the way I did below. (Each tab has an id that begins with subform.

I looked at this conversation on select with the tabs plugin but wasn’t sure how to apply it to my situation. I’m really new at jQuery! The more I know, the more I want to do and it seems like the less I know! I’d appreciate any advice!!

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

I found the answer on Cris Coyier’s site, CSS-Tricks. The article, jQuery UI Tabs with Next/Previous

Here is the code that worked:

$(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;
    });
});

What’s cool about it is that it finds the number of divs (that provide content for each tab) and then appends the next/previous buttons programmatically, skipping the first previous button and the last next button.

Works great!