隱藏除文檔某一部分以外的所有div

Question

我正在編寫用戶帳戶頁面，用戶可以在其中更改設置，並且該頁面由用戶點擊頂部的選項卡和頁面的內容部分組成更新以顯示其部分設置。

HTML代碼（僅僅是內容的一部分）：

<div id="content_navigation">Navigation menu with buttons, etc...</div> 
<div id="pass_settings"> 
    <p>Password settings page</p> 
</div> 
<div id="email_settings"> 
    <p>Email settings page</p> 
</div> 
<div id="delete_account"> 
    <p>Delete account page</p> 
</div> 

我的問題是，我想，我已經綁定到一個按鈕，在導航菜單隱藏所有，但具體div從每個jQuery的事件設置。

例如，如果他們點擊「密碼」按鈕，它會隱藏除密碼菜單以外的所有內容。

我知道這樣的代碼：

$('div:not(#myDiv)').hide(); // hide everything that isn't #myDiv 

，但適用於文檔中的每個div。我只希望它在這個特定的部分內隱藏除一個之外的所有內容。有沒有辦法做到這一點，而不是扔在另一個div環繞它們？

Answer 1

爲此確實存在類。

HTML：

<div id="content_navigation">Navigation menu with buttons, etc...</div> 

<div class="content" id="pass_settings"> 
    <p>Password settings page</p> 
</div> 
<div class="content" id="email_settings"> 
    <p>Email settings page</p> 
</div> 
<div class="content" id="delete_account"> 
    <p>Delete account page</p> 
</div> 

JS：

$('div.content').hide(); 
$('div.content#myDiv').show(); 
    //^(this selector could be terser, but I'm demoing)