代码之家 › 专栏 › 技术社区 › Karlom

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

navbar twitter-bootstrap css html

Karlom · 技术社区 · 8 年前

我有一个html页面,有两个bootstrap 3导航选项卡:

<!-- 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玩得很狂妄,但没能做到这一点。所以感谢你的帮助。

1 回复 | 直到 8 年前

richardev Valter Lobo 8 年前

只需为每个nav添加其特定的类名或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. */

推荐文章