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

Question

我有一个问题困扰了我将近一个星期了!!

场景是这样的

我有 6 个步骤选项卡，第 1 步选项卡，第 2 步选项卡，依此类推。我有一个名为“locked”和“active”的 css 类。

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

"active"- 它有一个样式 top: 0em; 使选项卡上升，然后它会变得可见，因此您现在可以单击该选项卡。

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

因此该特定步骤将变为事件或可见(在我的示例步骤 1 中)，然后其他步骤将不可见。所以现在具有 locked 类的元素是第 2 步、第 3 步到第 6 步。

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

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

在 Internet Explorer 上，即使删除类 locked 并添加类 active，样式也不会应用，为什么？因为还有其他步骤的类锁定。只有在没有其他带有类名锁定的步骤选项卡时，它才会变得可见。因此，简而言之，在最后一步中删除类 locked 后，所有步骤选项卡都将变得可见。

编辑:

这是我的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 可以看到另一个元素具有 locked

类的相同父元素

Answer 1

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

.step_tab {
显示: block ；
}

我只是将显示更改为 inline-block annnnddd 我不知道它只是解决了我的问题 xD