javascript - Bootstrap 导航丸 - 'active' 类在打开的模式中不起作用

Question

我有以下 nav-pills 组件代码:

  <ul id="steps" class="nav nav-pills form-steps">
    <li class="active"><a data-toggle="pill" href="#options"></a></li>
    <li><a data-toggle="pill" href="#payments"></a></li>
  </ul>

这就是事件 a 的外观(基本上它只是一个填充有特殊颜色的圆圈):

.form-steps > li.active > a {
    background-color: #931f2a;
}

这是常规 a 的代码:

.promoter-form-steps > li > a {
    border: 2px solid #931f2at;
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

我认为通过将 .active 类添加到相应的 li 元素会使 a 元素填充颜色，但当我第一次放置该组件的开放模态。当我单击另一个链接后第二次打开模式时，我看到正确的行为，即 .active 类填充了颜色。这是一个 SPA，我有另一个像这样的 nav-pills ，具有精确的标记，它工作得很好，我不太明白为什么这种行为在第二个 nav-pills< 上不起作用。我仔细检查了类名和 id 是否彼此重复，并且我确信没有自定义 js 参与其中。您能给我一个指示来检查我做错了什么吗？提前致谢!

Answer 1

以下是 Twitter 文档确定的推荐格式:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

您的列表标签需要有一个 nav-item 类，并且您的 anchor 需要一个 nav-link 类，然后才能使用事件类