当用户点击它时，更改div的颜色

Question

我有几个div，当用户点击其中任何一个时，我希望更改其背景颜色，我也希望第一次默认情况下第一个div应该是活动的彩色背景

我正在使用的代码是

.tabs.active a {
  background: black;
}

<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>

但颜色没有变化。任何人都可以告诉我代码出错的地方

Answer 1

使用CSS捕获click事件不是直接可能的，但确实存在一些“hacks”。其中一个是使用复选框：

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>

正如您所见，div被包含在绑定到隐藏复选框的标签中。当您单击标签（或其中的任何内容）时，复选框状态会发生变化，因此会应用CSS。

选择器input[type="checkbox"]:checked + label div找到任何选中的复选框，找到类型label和div内的直接兄弟。因此，标签必须直接在html中的随播复选框后面。

您应该能够修改此代码以满足您的需求。

UPDATE：在我以前的版本中，标签（以及点击注册边界）扩展到父容器的左右边缘（在本例中为正文）。通过在标签上设置display: table;，可以在保持块行为的同时避免这种情况。如果您希望div位于同一行，也可以使用inline-block。

Answer 2

您只需将:focus Pseudo class与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>

Answer 3

使用：target 伪类

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个..

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

它会为您点击的元素指定.active类，并且您的CSS将被应用。

Answer 6

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

}）;

enter link description here

Answer 7

如果我理解你的话，那你的CSS就错了。这是我提出的溶剂：

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

Answer 8

从您的问题中不清楚您是否希望每个div独立地改变颜色，或者您是否只希望突出显示其中一个div。

如果您只想一次选择其中一个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>

您现在可以看到，当您点击其中一个时，另一个将被取消选择。

这里的权衡是，一旦你选择了一个，总是必须选择其中一个。这是否正确，取决于您的需求。

P.S。稍微调整一下颜色，不要问我为什么，我不知道：）

Answer 9

您可以尝试 jQuery 或 JavaScript （ toggleClass() 中的 element.classList.toggle("active") 属性）

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

然后更改CSS：

.tabs.active{
  background: black;
}

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

.tabs.active{
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 tabs active">
  <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>