为什么没有应用我的活动选项卡样式？
为什么没有应用我的活动选项卡样式？
提问于 2019-07-11 03:09:13
我正在使用bootstrap选项卡，它工作得很好。我已经使用CSS将绿色边框颜色添加到活动选项卡中，但当我单击选项卡时，边框颜色绿色为闪烁。如何为活动边框设置永久边框颜色。
我已经尝试过下面的代码
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#firstTab">View All</a>
</li>
<li>
<a data-toggle="tab" href="#secondTab">Add New</a>
</li>
</ul>
<div class="tab-content">
<div id="firstTab" class="tab-pane fade in active">
Tab 1 Content
</div>
<div id="secondTab" class="tab-pane fade in ">
Tab 2 Content
</div>
</div>css文件
ul.nav.nav-tabs {
margin: 10px 0px;
}
ul.nav.nav-tabs li:not(.active) a {
background-color: #eeeeee;
color: grey;
}
ul.nav.nav-tabs li:active a {
border-top: 30px solid #16a765;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-11 03:44:33
您混淆了:active伪选择器(通常与链接和按钮相关联)和Bootstrap应用于当前选定选项卡的.active类。
ul.nav.nav-tabs li.active a { /* <-- dot, not colon */
border-top: 30px solid #16a765;
}Stack Overflow用户
发布于 2019-07-11 03:40:27
试试这段代码。希望能对你有所帮助。我在css文件的底部添加了一些代码。并且使用注释来指示它们。
ul.nav.nav-tabs {
margin: 10px 0px;
}
ul.nav.nav-tabs li:not(.active) a {
background-color: #eeeeee;
color: grey;
}
/* My code starts here */
ul.nav.nav-tabs li {
border-top: 5px solid transparent;
}
ul.nav.nav-tabs li.active {
border-top: 5px solid #16a765;
}
/* My code ends here */<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#firstTab">View All</a>
</li>
<li>
<a data-toggle="tab" href="#secondTab">Add New</a>
</li>
</ul>
<div class="tab-content">
<div id="firstTab" class="tab-pane fade in active">
Tab 1 Content
</div>
<div id="secondTab" class="tab-pane fade in ">
Tab 2 Content
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56977198
复制相关文章
相似问题