顯示/隱藏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的麻煩

回答

相關問題