Question

I’m trying to use jquery to create a tab effect for several div contents. at the moment, theres a list of items that when you click on, it triggers the div with the matching ID as the hyperlink. But I want to be able to have an additional feature where within the content DIV, theres a link that you click on and it will show the next div after it, as well as highlight the current div it is on.

I have got pretty much all of it working except for highlighting the nav matching the current DIV that you are viewing which is triggered from an internal link within the content DIV.

Hope that’s not too confusing to understanding, below is some code of what i got thus far.

HTML:

<div>
    <div id="page1">
        <p>xxx</p>
        <p><a href="#page2">Continue &raquo;</a></p>
    </div>
    <div id="page2">
        <p>xxx</p>
    </div>
</div><!-- /tabContainer -->
<div>
    <span>Page</span>
    <ul>
        <li><a href="#page1">1</a></li>
        <li><a href="#page2">2</a></li>
    </ul>
</div><!-- /pagination -->

javascript:

$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();

$("ul.tabs li").click(function(e) {
e.preventDefault();
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tabContent").hide();

    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
});    

$(".continue").click(function(e) {
    e.preventDefault();
    var activePage = $(this).attr("href");
    $(this).parent().parent().hide();
    $(activePage).fadeIn();

    $("ul.tabs li").removeClass("active");
    $("ul.tabs li > a[href='activePage']").addClass("active");
});

Answer 1

I have got pretty much all of it working except for highlighting the nav matching the current DIV that you are viewing which is triggered from an internal link within the content DIV.

Try this code:

$("ul.tabs li > a[href='"+activePage+"']").addClass("active");

If you put a variable in ” “, it wont be seen as a variable(it would work in PHP though, unless it’s single quotes). 🙂