Измените цвет div, когда пользователь нажимает на него

Ответ 1

Вы можете просто использовать класс :focus Pseudo с Tabindex.

Но если вы сосредоточитесь на каких-либо других вещах, тогда фоновый стиль вкладок будет потерян: (

.tabs>a>p:focus{ 
  background-color:gray !important;
  display:inline-block;
  color:#000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="1"> First </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="2"> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="3"> Third </p>
    </a>
</div>

Ответ 2

Невозможно поймать событие click с помощью CSS, но существует пара "хаков". Один из них - использовать флажок:

div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: blue;
  color: white;
  border: 4px solid green;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: table;
  margin: 20px;
}
input[type="checkbox"]:checked + label div {
  background-color: red;
  color: black;
}

<input type="checkbox" id="cb1">
<label for="cb1">
  <div>
    Div 1 - click me
  </div>
</label>

<input type="checkbox" id="cb2">
<label for="cb2">
  <div>
    Div 2 - click me
  </div>
</label>

Ответ 3

С : target псевдокласс

.col-md-2:target {background-color: black;}

<div class="col-md-2 tabs" id="first">
    <a href="#first">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs" id="second" >
    <a href="#second">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" id="third">
    <a href="#third">
        <p> Third </p>
    </a>
</div>

Ответ 4

$(".tabs").on("click", function(e){
  e.preventDefault();
  $(".tabs.active").removeClass("active");
  $(this).addClass("active");
});//

$(".tabs").eq(0).trigger("click");

.tabs.active a
{
  display: block;
  background: black;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="col-md-2 tabs">
    <a href="#">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Third </p>
    </a>
</div>

Ответ 5

Попробуйте это.

$(".tabs").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});

Он назначит класс .active для вашего элемента clicked, и ваш CSS будет применен.

Ответ 6

$(document).ready(function () {
$('#menu ul li a').click(function (ev) {
    $('#menu ul li').removeClass('selected');
    $(ev.currentTarget).parent('li').addClass('selected');
});

});

введите ссылку здесь

Ответ 7

Ваш CSS ошибочен, если я правильно понял. Вот мое предлагаемое решение:

.tabs:active
{
background-color: black;
}

Ответ 8

Из вашего вопроса неясно, хотите ли вы, чтобы каждый из разделов изменял цвета независимо или хотел, чтобы только один из div был выделен.

Если вы хотите, чтобы только один из разделов был выбран одновременно, вы можете использовать решение @Magnus Buvarp, но вместо использования флажков используйте переключатели с одинаковым именем.

div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: #eee;
  border: 2px solid gray;
}
input[type="radio"] { /* changed to "radio" */
  display: none;
}
input[type="radio"] + label { /* changed to "radio" */
  display: table;
  margin: 20px;
}
input[type="radio"]:checked + label div { /* changed to "radio" */
  background-color: yellow;
}

<strong>There can be only one!</strong>

<!-- changed to "radio" and added "name" attribute -->
<input type="radio" name="group1" id="rb1">
<label for="rb1">
  <div>
    Click Me!
  </div>
</label>

<!-- changed to "radio" and added "name" attribute -->
<!-- notice the same for both radio buttons is the same -->
<input type="radio" name="group1" id="rb2">
<label for="rb2">
  <div>
    No! Click Me!
  </div>
</label>