jquery - 切换多个选定的 Div

Question

我正在尝试使用 Jquery/CSS 设置选定 DIV 的背景，同时保持其他 DIV 的背景。

假设我有三个白色背景的 DIV。我想选择 DIV #3 并将背景颜色设置为黄色。然后，如果我选择#1，它会将背景更改为黄色，而#2 和#3 将再次变为白色。

HTML

  <div id="1" title="level" class="hover">
    <a href="#">
      1000
    </a>
  </div>
  <div id="2" title="level" class="hover">
    <a href="#">
      2000
    </a>
  </div>
  <div id="3" title="level" class="hover">
    <a href="#">
      3000
    </a>
  </div>

CSS

.hover{
  background-color: #FFFFFF;
  height: 100px;
  width: 100px;
  cursor: pointer;
  float: left;
  margin: 10px  10px 10px 6px;
  padding: 4px 4px 4px 4px;
}
.selected{
  background-color:#F3AF4D
}
.unselected{
  background-color:#FFFFFF
}

JS

$('div[title="level"]').on("click", function(){

    change_background()

    $(this).toggleClass("selected");

})

function change_background(){
  $( ".hover" ).each(function() {
    $( this ).toggleClass( "unselected" );
  });
}

我有一些软管，因为它没有按照我预期的方式工作，如本 CODEPEN 中所示

Answer 1

CSS Only 选项使用 :target 并链接您的 ID

.hover{
  background-color: #FFFFFF;
  height: 100px;
  width: 100px;
  cursor: pointer;
  float: left;
  margin: 10px  10px 10px 6px;
  padding: 4px 4px 4px 4px;
}

.hover:target{
  background-color:#F3AF4D
}

  <div id="1" title="level" class="hover">
    <a href="#1">
      1000
    </a>
  </div>
  <div id="2" title="level" class="hover">
    <a href="#2">
      2000
    </a>
  </div>
  <div id="3" title="level" class="hover">
    <a href="#3">
      3000
    </a>
  </div>

或者修复你的 JS

$('div[title="level"]').on("click", function(){

    //Remove selected from all
    $(".hover").removeClass("selected");
    
    //Add selected to clicked item
    $(this).addClass("selected");

})

.hover{
  background-color: #FFFFFF;
  height: 100px;
  width: 100px;
  cursor: pointer;
  float: left;
  margin: 10px  10px 10px 6px;
  padding: 4px 4px 4px 4px;
}
.selected{
  background-color:#F3AF4D
}
.unselected{
  background-color:#FFFFFF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="1" title="level" class="hover">
    <a href="#">
      1000
    </a>
  </div>
  <div id="2" title="level" class="hover">
    <a href="#">
      2000
    </a>
  </div>
  <div id="3" title="level" class="hover">
    <a href="#">
      3000
    </a>
  </div>