切换“多个”中的选定 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" );
  });
}

我

有一些软管，因为它没有按照我期望的方式工作，如这个代码笔所示

Answer 1

仅使用 :target 的 CSS 选项，并链接到您的 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>

Answer 2

切换类会将其删除(如果存在(，如果类不存在，则添加该类。 对于超过 2 个 .hoverdiv 的情况，您需要遍历每个div 并删除"选定"类并添加"未选定"类。 然后最后将"选定"添加到单击的那个，就像您正在做的那样。

   function change_background(){
      $( ".hover" ).each(function() {
        // remove 'selected' from every .hover
        $( this ).removeClass( "selected" ).addClass("unselected");
      });
    }