如何使用 Jquery 隐藏隐藏选项卡上的子元素，并使其保持隐藏状态直到我取消隐藏它？

Question

也许最好用一个例子来解释：

<div id="tab-1">
  <input name="1" type="text" />
  <input name="2" type="text" />
  <input name="3" type="text" />
<div>
<div id="tab-2">
  <input name="4" type="text" />
  <input name="5" type="text" />
  <input name="6" type="text" />
<div>

我正在使用 Jquery Tools“Tabs”工具。这会切换上面两个 div 的可见性，以便一次只显示一个。

问题如下：

1. 用户切换到选项卡 2。这会隐藏选项卡 1 以及字段 1 到 3。 这还显示选项卡 2 及其子项、字段 4 到 6。

2. 用户对选项卡 2 执行操作，该操作应从现在隐藏的选项卡 1 中删除字段 2。我正在使用 $('#field-2').hide(0);

这应该隐藏字段二，但什么也不做，因为字段二已经隐藏。现在就这样好了。

3.用户切换回选项卡1。

实际结果： 所有三个字段（包括字段 2）现在再次可见。

期望的结果： 字段 1 和 3 现在可见，但切换到 tab-1 不会取消隐藏字段 2，因为它已被函数显式隐藏。字段 2 应保持隐藏状态，直到明确取消隐藏为止。

我想我可以通过使用 display:none; 为字段分配一个特殊的 css 类来规避这个问题，但我想知道是否有更好的解决方案来独立于选项卡显示/隐藏该元素已打开，无需分配额外的 css 类。

Answer 1

如果您实际更改元素的 display 样式，而不是使用 hide，它似乎可以工作：

$('selector').css('display', 'none');