Bootstrap タブの色が正しく表示されない

Question

お世話になります。bootstrapを用いたタブの色変更で悩んでおります。

#やりたいこと　タブの色を1色表示させクリックしたらタブの色を変えたいです。

やりたいことは、クリックしたらタブの色が茶色くなる。という挙動です。青は必要ありません。現在のタブの状況を以下に表示します。タブは３つあり

その１　左
その２　まんなか
その３　右
となっています。

#その１(左タブ)を押した時

正しい挙動です。文句なく正しくタブの色が表示されています。

#その２(真ん中タブ)を押した時

真ん中が青くなってしまい、左側のタブは茶色いままです。

#その３(右タブ)を押した時

右が青くなってしまい、左側のタブは茶色いままです。

#ためしたこと

  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a href="#photo1" class="nav-link active original_tab_color" 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>

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

宜しくお願いします。

Answer 1

a.nav-link.active でアクティブ化

ナビゲーション～Bootstrap4移行ガイド

Comments

[退会済みユーザー]

https://cccabinet.jpn.org/bootstrap4/components/navs#tabs　は既にチェックしているのですが、アクティブでない色の指定方法がなく質問してます

[Lhankor_Mhy]

> アクティブでない色の指定方法がなく質問してます

『やりたいことは、クリックしたらタブの色が茶色くなる』とご質問にありましたが、誤記でしたらご訂正ください。

[Lhankor_Mhy]

もしかして、「クリックしたタブはアクティブになる」ということをご存じない、とかそういうことですか？

[退会済みユーザー]

すみません。混乱させてしまいましたね。
例えば、その２をクリックをしても、色が茶色にならないのです。
しかもその２をクリックしてるのに、その１が茶色のままなのです。
これを質問しています。

[Lhankor_Mhy]

なるほど。
やはり、「クリックしたタブはアクティブになる」ということをご理解されていないようですね。

https://cccabinet.jpn.org/bootstrap4/components/navs#javascript-behavior
↑こちらをご参照になるとよろしいかと思います。

[Lhankor_Mhy]

もしかして、「クリックしたタブはアクティブになる」ということはご理解されていても、「クリックしたタブはアクティブになるのだから、アクティブ化しているタブにスタイルをつければ、クリックしたタブにスタイルがつく」ということが理解できないのでしょうか？

[退会済みユーザー]

はい。理解できていませんでした。なるほど。そういう事だったんですか。わかりました。いやぁあたまいいですね。ベストアンサーとさせて頂きます。

[Lhankor_Mhy]

それほどでも