开发者

jQuery show hide content/div using links/controllers

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 t开发者_JAVA百科riggers 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");
});


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). :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜