esp*_*fee 2 javascript css twitter-bootstrap twitter-bootstrap-3
我有几个项目的导航栏。如果当前选择了每个选项卡,则会为其分配活动类。如果该类处于活动状态,我想为该选项卡设置背景颜色。这是示例:
div.admin-box {
background-color: #E0E0E0;
}
.active a {
background-color: #E0E0E0 !important;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab-2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab-3">Tab 3</a></li>
<li><a data-toggle="tab" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab-content">
<!-- Tab 1 -->
<div id="tab-1" class="tab-pane fade in active admin-box">
Tab 1 content.
</div>
<!-- Tab 2 -->
<div id="tab-2" class="tab-pane fade admin-box">
Tab 2 content
</div>
<!-- Tab 3 -->
<div id="tab-3" class="tab-pane fade admin-box">
Tab 3 content.
</div>
<!-- Tab 4 -->
<div id="tab-4" class="tab-pane fade admin-box">
Tab 4 content.
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
如您所见,每个选项卡容器都有背景颜色。因此选定的选项卡应具有相同的背景颜色以匹配容器背景。有没有办法通过纯 CSS 或 JS 来实现这一点?如果有人知道这样做的简单方法,请告诉我。
您需要修改 CSS .nav-tabs > li.active > a
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
您还可以修改 v3 中的 LESS 变量@navbar-default-link-active-bg
和@navbar-default-link-active-color
您应该在引导样式表包含或 sass 导入之后包含此 CSS 更改,以避免使用!important
覆盖
归档时间: |
|
查看次数: |
8386 次 |
最近记录: |