javascript - 显示/隐藏 JavaScript 时出现问题

Question

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

我的 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 个内容 block ——因为它们将由用户在 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