изменить цвет фона divs при нажатии

У меня есть вкладки, состоящие из следующих элементов: Когда я нажимал на любой из div, мне нужно изменить цвет фона на синий, и если я нажму на другой div, цвет предыдущей вкладки должен быть установлен в оригинальный и новый щелкнул сОн цвета быть синими и так далее:изменить цвет фона divs при нажатии

Это мой 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?

источник

2013-08-27 user1471980

Невозможно использовать только CSS. Вам нужен JavaScript. –

Вы говорите, что хотите нажать 'div', но вы показываете * one * 'div', содержащий кучу' a' элементов; что, собственно, вы хотите в ответ на что? Каков ваш * актуальный * (представительский) HTML? –

активен только тогда, когда вы удерживаете нажатой кнопку. – Rooster

Чтобы переключить класс, вам необходимо использовать Javascript/jQuery. Вы не можете сделать это с помощью чистого CSS.

Изменить CSS

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

JQuery

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

    $('.zoom_controls a').removeClass('active'); //Remove color for all with class .zoom_controls 
    $(this).toggleClass('active'); //Apply bgcolor to clicked element 
});

Codepen sketch

Update Если вы по какой-то причине, думая о a:hover, тогда вы делаете это так в CSS.

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

В противном случае, если вы хотите настроить «активное» состояние ссылки, вы делаете это правильно.

источник

2013-08-27 17:16:58 kunalbhat

Я сделал именно то, что вы сказали. не работая для меня, когда я перемещаю браузер, цвет возвращается к оригиналу. Мне нужно, чтобы он остался синим, когда я щелкнул. – user1471980

Включили ли вы jQuery? – kunalbhat

Да, у меня есть jquery. – user1471980

Состояние :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 demo

источник

2013-08-27 17:19:28

Rash, я сделал точно так же, как вы предлагали, тот же результат, ничего не изменилось. – user1471980

У вас есть библиотека jQuery, включенная в ваш источник? Если это так, в вашем приложении должно быть что-то еще. Демонстрация, с которой я связан, делает то, о чем вы просите. –

Вы можете использовать библиотеки JQuery JS для выбора активных вкладок и назначить фон цвет. Хороший бит с использованием jquery - это совместимость с другими браузерами.

источник

2013-08-27 17:20:21 t0dd

It работа, но не делает, что вы хотите. Потому что active - это только dynamic pseudo-class, который определяет стиль активного элемента (в этом случае любая ссылка внутри div с классом zoom_controls, когда нажимается).

Возможно, для этого задания, требующего сложного решения CSS 3, может потребоваться JavaScript.

источник

2013-08-27 17:22:58 federicot

изменить цвет фона divs при нажатии

ответ

Смежные вопросы