Question

我有一个困扰我差不多一个星期的问题!!

这是方案，

我有6个步骤标签，第1步标签，第2步标签，等等。我有一个名为＆＃34;锁定＆＃34;的css类。和＆＃34;活跃＆＃34;。

＆＃34;的锁定＆＃34; - 它有一个样式top: 3em;，导致标签向下移动一点然后我有一些元素会阻止它，因此标签将隐藏在该元素的背面然后这就是为什么它＆＃39 ; s锁定。

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

现在，我的javascript代码上有一个事件。如果该事件触发，我将添加类＆＃34;活动＆＃34;并删除课程＆＃34;锁定＆＃34;使用jQuery。 $("#step1").addClass("active").removeClass("locked");

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

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

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

在Internet Explorer上，即使已删除锁定类，我添加了活动类，该样式也不适用，为什么？因为还有其他步骤已锁定。只有在没有其他带有类名已锁定的步骤标签时，它才会显示。因此，简而言之，在最后一步删除锁定类后，所有步骤选项卡都将显示。

编辑：

这是我的HTML代码

＆＃13;

.step_tab.locked {
  color: #797979;
  cursor: default;
  top: 3em;
}
.step_tab.active {
  background: #54B848;
  cursor: default;
  top: 0em;
}

＆＃13;

<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>

＆＃13;

如果您注意到，则所有step_tab都被锁定。然后是事件触发器，我将在step_tab上添加和删除类。通过检查按F12的DOM，jQuery addClass和removeClass正在工作。唯一的问题是，即使我删除了锁定类并将其更改为活动，让我们说例如step1，它也不适用于此，因为IE可以查看具有相同父元素的另一个元素，其中类已锁定

Answer 1

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

.step_tab { display: block; }

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

如果存在具有相同类名

1 个答案: