70

タブごとにアクティブな色を変更しようとしています（クリックした後もTwitterの水色のままです）。

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

（どのように）CSSでこれを行うことができますか？

4

14 に答える 14

99

アクティブリンクのカスタムカラーを使用して独自のクラスをnav-pillsコンテナに提供できます。これにより、ページの他のセクションのブートストラップのデフォルトの色を変更せずに、好きなだけ色を作成できます。これを試して：

マークアップ

<ul class="nav nav-pills red">
    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
    <li><a href="#tab2" data-toggle="tab">Sample</a></li>
    <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

そして、これがカスタムカラーのCSSです。

.red .active a,
.red .active a:hover {
    background-color: red;
}

.activeまた、アイテムのデフォルトの色を置き換える場合は、nav-pills次のように元の色を変更できます。

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}
于 2012-05-12T23:06:36.693 に答える
7

これは Bootstrap 4.0 に固有のものです。

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link nav-link-color" href="#about">home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link nav-link-color"  href="#contact">contact</a>
  </li>
</ul>

CSS

.nav-pills > li > a.active {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

.nav-pills > li > a:hover {
  color: #ffffff !important;
}

.nav-link-color {
  color: #ffffff;
}
于 2017-12-27T22:59:24.280 に答える
3

この切り取りを使用して、同じ ul 内のすべての錠剤のアクティブなクラスを変更します (ドキュメントの準備ができたときに適用されます)。

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});
于 2012-07-30T12:52:38.243 に答える
0

これは、ブートストラップ4.4.1で完全に機能しました!!

.nav-pills > li > a.active{
  background-color:#46b3e6 !important;
  color:white !important;
}

  .nav-pills > li.active > a:hover {
  background-color:#46b3e6 !important;
  color:white !important;
        }

.nav-link-color {
  color: #46b3e6;
}
于 2019-12-01T05:26:27.357 に答える