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)

隐藏除文档特定部分中的所有div之外的所有div

1 个答案: