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>

我想根据点击的链接将show class切换为hide class。不知道我怎么能做到这一点。它必须足够灵活，可以使用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

显示/隐藏JavaScript的麻烦

1 个答案: