選択中のボタン（タブ）の色を変化＋維持させたい

Question

前提・実現したいこと

3つのボタンを横並びに配置しており、クリック出来るようになっています。
選択すると、そのボタンが選択されていることが分かるように、
フォントと背景色を変化させたいです。

ボタンの上にカーソルを持って行った際の色の変化は、
【:hover】でつけることが出来ましたが、クリックすると元に戻ります。
【.current】で設定できるかと試しましたが、うまく行きません。
ご回答お願いします。

発生している問題・エラーメッセージ

cssが効かない。

該当のソースコード

        =HTML=
        <div class="tab-menu">
          <ul class="nav nav-tabs justify-content-center row">
            <li class="nav-item col-3">
              <a class="nav-link active" data-toggle="tab" href="#use">ご利用について</a>
            </li>
            <li class="nav-item col-3">
              <a class="nav-link" data-toggle="tab" href="#booking">来店予約</a>
            </li>
            <li class="nav-item col-3">
              <a class="nav-link" data-toggle="tab" href="#servise">設備・サービス</a>
            </li>
          </ul>
        </div>

        =CSS=
        .nav-item:hover {
          background-color: #d29d2c;
          cursor: pointer;
        }

        .nav-item.current {
          background-color: #d29d2c;
          cursor: pointer;
        }

試したこと

クラス属性には.currentが効かないのかと、セレクタ名を変えて色々と実行しました。
が、どれもうまくいきませんでした。

ul.current{background...;}
li.current{background...;}

補足情報（FW/ツールのバージョンなど）

bootstrapを読み込んで使用しています。

ここにより詳細な情報を記載してください。

Answer 1

タブがアクティブになると.nav-linkに.activeがつくようになっているようですので、
そちらを使うようにすればご希望の動作ができるような気がします。

.nav-link:hover {
	background-color: #d29d2c;
	cursor: pointer;
}
.nav-tabs .nav-link.active {
	background-color: #d29d2c;
}

Comments

[apiros]

hokuto_様
ご回答下さいまして、ありがとうございます。
適用してみましたが、うまく作動しないようです...。