jQuery 使用链接/控制器显示隐藏内容/div

Question

我正在尝试使用 jquery 为多个 div 内容创建选项卡效果。目前，有一个项目列表，当您单击该列表时，它会触发带有匹配 ID 作为超链接的 div。但我希望能够有一个附加功能，在内容 DIV 中，有一个链接，您单击它就会显示其后的下一个 div，并突出显示它所在的当前 div。

除了突出显示与您正在查看的当前 DIV 相匹配的导航（由内容 DIV 中的内部链接触发）之外，我几乎已经完成了所有工作。

希望这不会太令人困惑，下面是我迄今为止得到的一些代码。

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

除了突出显示与您正在查看的当前 DIV 相匹配的导航（由内容 DIV 中的内部链接触发）之外，我几乎已经完成了所有工作。

尝试以下代码：

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

如果您放置一个变量在“”中，它不会被视为变量（尽管它可以在 PHP 中工作，除非它是单引号）。 :)