如何隱藏錨點href點擊javascript（jQuery）引用的div

我有幾塊分離成自己的div的文本塊。我在導航欄中也有幾個鏈接，它們通過錨鏈接引用這些div。點擊後，我想隱藏除點擊鏈接引用的其他div之外的所有其他div。我有：如何隱藏錨點href點擊javascript（jQuery）引用的div

<div id="navbar"> 
    <ul> 
    <li><a href="#section1">Link 1</a></li> 
    <li><a href="#section2">Link 2</a></li> 
    <li><a href="#section3">Link 3</a></li> 
    <li><a href="#section4">Link 4</a></li> 
    </ul> 
</div>

所以，當我點擊'鏈接3'。我想隱藏除＃section3以外的所有div。

我很好，實際上隱藏/顯示使用CSS的每一段文字，但我無法弄清楚如何使用鏈接的href屬性引用div名稱。

感謝您的幫助，如果您需要澄清我的要求，請告訴我。

來源

2011-06-12 isTravis

可以使用錨的.hash property作爲一個選擇，你需要這樣的隱藏你想先的div，像這樣：

$('#navbar a').click(function(e) { 
    $('.container > div').hide(); 
    $(this.hash).show(); 
    e.preventDefault(); //to prevent scrolling 
});

這裏假設你有你想要顯示的<div>元素在某種容器中，像這樣：

<div class="container"> 
    <div id="section1">Section 1</div> 
    <div id="section2">Section 2</div> 
    <div id="section3">Section 3</div> 
    <div id="section4">Section 4</div> 
</div>

You can test it out here。

來源

2011-06-12 21:51:25

哇 - 太好了。這正是我尋找的功能。我不知道我可以使用'.hash'作爲選擇器 - 完美！謝謝！ – isTravis 2011-06-12 21:56:19

@tsrich - yup，因爲它與ID選擇器相同，所以非常方便*和*便宜，雙贏:) – 2011-06-12 21:57:05

試試這個：

$('#navbar a').click(function() { 
    $('div:not(#navbar)').hide(); 
    $($(this).attr('href')).show(); 
    return false; // You may or may not want this line. 
});

你可以看到一個例子here。

來源

2011-06-12 21:48:52 icktoofay

如何隱藏錨點href點擊javascript（jQuery）引用的div

回答

相關問題