显示/隐藏JavaScript的麻烦

我将要有一个ExpressionEngine网络日志，它将用户设计的内容块放在页脚中。但是，它只能一次显示一个。显示/隐藏JavaScript的麻烦

我的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，所以我真的很感谢任何见解，或解决方案，我可能会做到这一点。

来源

2010-01-15 Fuego DeBassi

，我认为这将与您的结构工作：

// 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

来源

2010-01-15 19:03:55 Sampson

感谢您的帮助！这还不行，但我开始看到它。不需要有某种特定的标识符来告诉它哪个链接应该显示哪个内容块？任何解决方案，我可能会这样做？ – 2010-01-15 19:42:47

未知，“标识符”是链接出现的顺序。第一个链接将切换第一个div。第二个链接将切换第二个div等。这是有效的 - 检查解决方案底部的“在线演示”。 – Sampson 2010-01-15 19:44:30

嗯。很对，它似乎确实按照你的JsBin例子的需要工作。然而，你在那里成功使用的确切代码片段，在我实现时很奇怪（这是本地EE安装，或者我将它链接）。它似乎只适用于列表中的最后一个链接。在我们的例子中，链接4.一旦最后一个链接被激活，紧接着的链接激活第一个内容块。有什么想法吗？ – 2010-01-15 20:46:51

显示/隐藏JavaScript的麻烦

回答

相关问题