显示/隐藏 JavaScript 的问题

Question

我将拥有一个 ExpressionEngine 博客，它将用户设计的内容块放置在页脚中。但是，它一次只会显示一个。

我的 HTML 如下所示：

<ul class="footernav">
    <li class="first"><a class="active" href="#">Get in touch</a></li>
    <li><a href="#">Interested in joining?</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">Link 4</a></li>
</ul>
<div class="copy gutters show">
    <p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
    <p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
    <p>Lorem Ipsum</p>
</div>

我想根据点击的链接将显示类切换为隐藏类。不知道我怎么能做到这一点。它必须足够灵活以处理 N 个内容块——因为它们将由用户在 ExpressionEngine 中定义。

我对 JavaScript 非常陌生，因此我非常感谢任何关于我如何完成此任务的见解或解决方案。

Answer 1

我认为这适用于您的结构：

// Cycle through each link in our ul.footernav element
$(".footernav a").each(function(i,o){
  // Attach click-logic to each link
  $(this).click(function(e){
    // Prevent page from bouncing, reloading, etc.
    e.preventDefault();
    // Add .active class to this, but remove from all other links
    $(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active");
    // Show any DIV having class .copy and same index as clicked link
    // meaning, clicking the second link will show the second div
    $("div.copy:eq("+i+")").show().siblings("div.copy").hide();
  });
});

在线演示：http://jsbin.com/ekecu