文書の特定のセクション以外のすべての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に適用されます。私は、この特定のセクション内で、1つ以外のすべてを隠すことを望みます。これを行うには別の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)