我在页面中使用引导导航选项卡,我想更改活动选项卡的背景颜色和文本颜色
<div class="tab-content">
<div class="os-tabs-controls">
<ul class="nav nav-pills text-upper pl-2 pr-2">
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#leavelist" aria-expanded="true">
LeaveList
</a>
</li>
<li class="nav-item tabs p-2">
<a class="nav-link" data-toggle="tab" href="#procurementlist" aria-expanded="false">
Procurement List
</a>
</li>
</ul>
</div>
</div>
我的CSS如下
<Style>
.nav-item a:active{
color: white;
background-color: red;
}
</Style>
上面的代码在我单击tab时工作正常,但它立即变回默认的颜色样式。请任何人看看这个问题,并帮助我让它工作。
3条答案
按热度按时间htrmnn0y1#
它的工作现在,实际上我覆盖了默认的样式与我的自定义样式添加以下css
8qgya5xd2#
你可以使用jQuery:
CSS:
JSFiddle在这里:Link
kadbb4593#
很简单,在页面上的引用链接处添加类
如果你想在悬停时有同样的效果,你可以简单地把它添加到导航链接类中。
对于一页网站: