Internet Explorer CSS类样式没有'如果存在具有相同类名的其他元素，则不适用

Internet Explorer CSS class style doesn't apply if there are other element with same class name

本文关键字：同类 其他 不适用 元素 如果 样式 CSS Explorer Internet 存在      更新时间：2023-11-06

我有一个问题困扰了我将近一周！！

这就是场景，

我有6个步骤选项卡，步骤1选项卡，步骤2选项卡，等等。。我有一个名为"locked"answers"active"的css类。

"锁定"-它有一个样式top: 3em;，它会导致选项卡向下移动一点，然后我有一些元素会阻止它，所以选项卡会隐藏在该元素的后面，这就是它被锁定的原因。

"活动"-它有一个样式top: 0em;，它会导致选项卡上升，然后它会变为可见，因此您现在可以单击选项卡。

现在，我有一个关于javascript代码的事件。如果该事件触发，我将使用jQuery添加"active"类并删除"locked"类。$("#step1").addClass("active").removeClass("locked");

因此，该特定步骤将变为活动的或可见的（在我的示例步骤1中），然后其他步骤将不可见。因此，现在锁定了类的元素是步骤2、步骤3到步骤6。

然后，事件将触发到另一个步骤，依此类推。直至步骤6。然后所有步骤都将可见。

这适用于chrome和mozilla，但不适用于IE

在internet explorer上，即使移除了被锁定的类，并且我添加了活动的类，样式也不会应用，为什么？因为还有其他步骤锁定了类。只有在没有其他类名被锁定的步骤选项卡时，它才会变为可见。因此，简而言之，所有步骤选项卡都将在最后一步移除锁定的类后可见。

编辑：

这是我的html代码

.step_tab.locked {
  color: #797979;
  cursor: default;
  top: 3em;
}
.step_tab.active {
  background: #54B848;
  cursor: default;
  top: 0em;
}
<nav>
  <ul>
    <li><a class="step_tab step1 active"><span class="step_label">Step</span> <span class="digit_label">1</span></a>
    </li>
    <li><a class="step_tab step2 locked"><span class="step_label">Step</span> <span class="digit_label">2</span></a>
    </li>
    <li><a class="step_tab step3 locked"><span class="step_label">Step</span> <span class="digit_label">3</span></a>
    </li>
    <li><a class="step_tab step4 locked"><span class="step_label">Step</span> <span class="digit_label">4</span></a>
    </li>
    <li><a class="step_tab step5 locked"><span class="step_label">Step</span> <span class="digit_label">5</span></a>
    </li>
  </ul>
</nav>

如果您注意到，所有step_tab都已锁定。然后是事件触发器，我将在step_tab中添加和删除类。通过按F12检查DOM，jQuery addClass和removeClass正在工作。唯一的问题是，即使我删除了类locked并将其更改为active（例如步骤1），它也不会应用于此，因为IE可以看到另一个具有相同父元素的元素，并且类已锁定

我解决了我的问题。我有类

.step_tab { display: block; }

我刚刚将显示更改为内联块annnddd我不知道它刚刚解决了我的问题xD

相关文章：