Question

我有一个带有两个bootstrap 3导航标签的html页面：

<!-- Nav tabs 1 -->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#foods_week" aria-controls="foods_week" role="tab" data-toggle="tab">This Week</a></li>
<li role="presentation"><a href="#foods_all" aria-controls="foods_all" role="tab" data-toggle="tab">All times</a></li>
</ul>

<!-- Tab panes 1 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foods_week"> 
       Some text here 
</div>
<div role="tabpanel" class="tab-pane" id="foods_all">
    Lorem Ipsom
</div>

</div>                       
</div>
<!-- ‌END Nav tabs 1 -->


<!-- Nav tabs 2-->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#recepies_week" aria-controls="recepies_week" role="tab" data-toggle="tab">This Week</a></li>
<li role="presentation"><a href="#recepies_all" aria-controls="recepies_all" role="tab" data-toggle="tab">All times</a></li>
</ul>

<!-- Tab panes 2-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="recepies_week"> 
    Bla blalbla 
</div>
<div role="tabpanel" class="tab-pane" id="recepies_all">
    Long story short...
</div>

</div>                       
</div>
<!-- ‌END Nav tabs 2 -->

CSS：

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 ; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

我想要的是给Nav tabs 2一个令人不快的颜色：在悬停时有红色下划线和红色文字，而不是蓝色。

我用css打了一圈但却无法实现。非常感谢您的帮助。

Answer 1

只需为每个导航添加其特定的类名或ID。例如：

<ul id="nav-one" class="nav nav-tabs" role="tablist"></ul>
<ul id="nav-two" class="nav nav-tabs" role="tablist"></ul>
<ul id="nav-three" class="nav nav-tabs" role="tablist"></ul>

然后在你的CSS中，只需将nav类和属性公开，并相应地更改它们。

#nav-one.nav-tabs { border-bottom: 2px solid #DDD; }
/* ... */
#nav-two.nav-tabs { border-bottom: 3px solid #CCC; }
/* ... */
#nav-three.nav-tabs { border-bottom: 4px solid #999; }
/* And etc. */

如何为每个引导导航窗格指定不同的颜色？

1 个答案: