显示/隐藏JavaScript有问题

我将有一个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>

同侧眼睑

同侧眼睑

同侧眼睑

我想根据单击的链接将show类切换为hide类。我不知道如何才能做到这一点。它必须足够灵活，可以处理N个内容块——因为它们将由用户在ExpressionEngine中定义

---

我对JavaScript非常陌生，因此我非常感谢任何关于如何实现这一点的见解或解决方案。

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

// 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();
  });
});

---

在线演示：

谢谢您的帮助！这还不起作用，但我开始明白了。难道不需要某种特定的标识符来告诉它哪个链接应该显示哪个内容块吗？有什么解决办法吗？未知，“标识符”是链接出现的顺序。第一个链接将切换第一个div。第二个链接将切换第二个div，以此类推。这很有效-检查解决方案底部的“在线演示”。Hmm。非常正确，它似乎完全按照JsBin示例的需要工作。然而，您在那里成功使用的确切代码片段在我实现时工作异常（它是本地EE安装，或者我会链接它）。它似乎只适用于列表中的最后一个链接。在我们的例子中，链接4。一旦最后一个链接被激活，它前面的链接就会激活第一个内容块。有什么想法吗？班德达斯，你没有任何其他

div.copy

元素，是吗？我假设这里的HTML示例准确地表示了您机器上的HTML示例。我忘了我在页面的其他区域也使用了div.copy，造成了巨大的破坏。非常感谢你，乔纳森。唯一的另一个问题是…上的活动类不会随着单击进行切换。。有什么想法吗？