Скрыть все 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>

Проблема, с которой я столкнулся, заключается в том, что я хочу, чтобы каждое событие jQuery, которое я связывал с кнопкой в ​​меню навигации, скрывало все, кроме определенной div из настроек.

Например, если они нажмут на кнопку «Пароль», она скроет все, кроме меню пароля.

Я знаю такой код:

$('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)