我有以下 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 参与其中。
您能给我一个指示来检查我做错了什么吗?提前致谢!
最佳答案
以下是 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 类,然后才能使用事件类
关于javascript - Bootstrap 导航丸 - 'active' 类在打开的模式中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45552014/