BOOTSTRAP タブの色を変更したい

Question

#追記します。

タブの色を以下のように設定したいです。以下画像を踏まえ記載いたしました

#その１を押した時
指定の通りコードを書くと「その１」を茶色にする事ができました。ありがとうございます。イメージ通りです。

#その２を押した時

しかし、「その２」を押すと
「その２」が茶色になりません。
「その１」の背景は透明にしたいですが茶色のままです。

#その３を押した時

「その１」の背景は透明にしたいです。いまは茶色のままです。
「その２」は背景が透明になっててこのままでOKです。。
「その３」は背景を茶色にしたいです。

お世話になります。BOOTSTRAPのタブの色を変更したいです。宜しくお願いいたします。

#やりたいこと　BOOTSTRAPのタブの色を変更したいです。

#できないこと

上記のタブの色を変更したいです。変更したい色は2色ですがCSSで指定したものの変更されず困っております。　

左側のタブの「その１」の文字の背景の青部分
その２、その３の文字色

変更したい色は上記２色です。

#ためしたこと

.nav-item .nav-link .active{
    color: #fff!important;
    background-color: brown!important;
}

#ソース

  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a href="#photo1" class="nav-link active" data-toggle="tab">その１</a>
    </li>
    <li class="nav-item">
      <a href="#photo2" class="nav-link" data-toggle="tab">その２</a>
    </li>
    <li class="nav-item">
      <a href="#photo3" class="nav-link" data-toggle="tab">その３</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="photo1" class="tab-pane active">
        <p>あああああ</p>
    </div>
    <div id="photo2" class="tab-pane">
        <p>いいいいい</p>
    </div>
    <div id="photo3" class="tab-pane">
      <img src="images/photo3.jpg" class="img-fluid" alt=""/>
    </div>
  </div>

Comments

[退会済みユーザー]

いかがでしょうか。

Answer 1

nav-link activeに自作のborwnクラス付与してcssで指定すれば可能です。
もしくはbootstrap側のデフォルトの値を書き換えるか。
前者の方が良いと思います。

.brown{
  color: #fff!important;
  background-color: brown!important;
}

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a href="#photo1" class="nav-link active brown" data-toggle="tab">その１</a>
  </li>
  <li class="nav-item">
    <a href="#photo2" class="nav-link" data-toggle="tab">その２</a>
  </li>
  <li class="nav-item">
    <a href="#photo3" class="nav-link" data-toggle="tab">その３</a>
  </li>
</ul>

<div class="tab-content">
  <div id="photo1" class="tab-pane active">
      <p>あああああ</p>
  </div>
  <div id="photo2" class="tab-pane">
      <p>いいいいい</p>
  </div>
  <div id="photo3" class="tab-pane">
    <img src="images/photo3.jpg" class="img-fluid" alt=""/>
  </div>
</div>

Comments

[退会済みユーザー]

丁寧にありがとうございます。思った挙動ができませんでしたので、質問に追記という形で冒頭に記載させて頂きます。引き続きどうぞよろしくお願いいたします

[退会済みユーザー]

解決した問題は一度クローズして「新規で質問」してください。

[退会済みユーザー]

解決しておりません。

[退会済みユーザー]

追記の通りユーザが押したタブの色だけを変更させたいです。

[退会済みユーザー]

そのためクローズはしません。

Answer 2

追記。
https://getbootstrap.com/docs/4.3/components/navs/

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: brown;
}

  
 <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a href="#photo1" class="nav-link active" data-toggle="tab">その１</a>
    </li>
    <li class="nav-item">
      <a href="#photo2" class="nav-link" data-toggle="tab">その２</a>
    </li>
    <li class="nav-item">
      <a href="#photo3" class="nav-link" data-toggle="tab">その３</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="photo1" class="tab-pane active">
        <p>あああああ</p>
    </div>
    <div id="photo2" class="tab-pane">
        <p>いいいいい</p>
    </div>
    <div id="photo3" class="tab-pane">
      <img src="images/photo3.jpg" class="img-fluid" alt=""/>
    </div>
  </div>

Comments

[退会済みユーザー]

ありがとうございます