CSS Bootstrap 3 和选项卡：如何为多个活动选项卡设置自定义颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21492932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 and Tabs : How set custom color for more than one active tab?
提问by redshift
I am trying to get my active tabs to show the color of its background rather than the default white. I could easily do this if I was just using one set of nav tabs, but I need to figure out how to do it with more than one set (as shown in my demo). Demo hereHere's my HTML (CSS below as well as a link to demo)
我试图让我的活动标签显示其背景的颜色而不是默认的白色。如果我只使用一组导航选项卡，我可以很容易地做到这一点，但我需要弄清楚如何使用多组来做到这一点（如我的演示所示）。Demo here这是我的 HTML（下面的 CSS 以及演示链接）
<div class="row nav-set1">
<div class="col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Some text can go here and there and here and there again. Yes, some text will g here and there again and again.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Some text can go here and there and here and there again. Yes, some text will g here and there again and again. Some text can go here and there and here and there again. Yes, some text will g here and there again and again. Some text can go here and there and here and there again. Yes, some text will g here and there again and again.</p>
</div>
</div>
</div>
</div><!--/.row-->
<br/><br/>
<div class="row nav-set2">
<div class="col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home2" data-toggle="tab">Home</a></li>
<li><a href="#profile2" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home2">
<p>Some text can go here and there and here and there again. Yes, some text will g here and there again and again.</p>
</div>
<div class="tab-pane fade" id="profile2">
<p>Some text can go here and there and here and there again. Yes, some text will g here and there again and again. Some text can go here and there and here and there again. Yes, some text will g here and there again and again. Some text can go here and there and here and there again. Yes, some text will g here and there again and again.</p>
</div>
</div>
</div>
</div><!--/.row-->
CSS code:
CSS代码：
.nav-set1 {
background-color: yellow;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #555;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
回答by mikedidthis
Based on the current markup:
基于当前标记：
.nav-set1 .nav .active a {
background-color: grey ;
}
.nav-set2 .nav .active a {
background-color: blue ;
}
回答by Radiance
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: #fff; color: red; /* or any color that you want as the font color*/ cursor: default; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: #fff; 红色; /* 或任何您想要作为字体颜色的颜色*/ cursor: default; }
