0

次のタブで構成されています.divのいずれかをクリックすると、背景色を青に変更する必要があり、他のdivをクリックすると、前のタブの色を元に設定し、新しくクリックしたdivの色を青に設定する必要があります.すぐ：

これは私のhtmlです：

                          <div class="zoom_controls">
                              <a class="db" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
                              <a class="db" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="db" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
                        </div>

私はこれを持っています：

.zoom_controls a:active {
            background-color: #a6d1ff;
}

機能していないようです

cssでこれを行うにはどうすればよいですか？

4

4 に答える 4

1

状態は:active、アンカーがアクティブな場合、つまりユーザーがクリックしている場合にのみ適用されます。そのクリックが終了すると、状態も終了します。あなたが望むことは、純粋な CSS では実現できません。

CSS :

.zoom_controls a.active {
  background-color: #a6d1ff;
}

jQuery :

$('.zoom_controls a').on('click', function(ev) {
  ev.preventDefault();

  $(this).addClass('active').siblings('.active').removeClass('active');
});

JSBin デモ

于 2013-08-27T17:19:28.867 に答える
0

JS ライブラリ jquery を使用して、アクティブなタブを選択し、背景色を割り当てることができます。jquery を使用する利点は、他のブラウザーとの互換性です。

于 2013-08-27T17:20:21.317 に答える