隐藏除文档某一部分中的一个 div 之外的所有 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)