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

仅使用<img height="15" width="15" src="http://www1.dnsbl.info/test-a.php?bl=bl.emailbasura.org&ip=208.87.233.201&cb=1123477419&token=0f46ad74b3eb0606dc4644be7218d0d5" alt="">的CSS选项并链接到您的ID

＆＃13;

:target

＆＃13;

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

＆＃13;

或修复你的JS

＆＃13;

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

＆＃13;

$('div[title="level"]').on("click", function(){

    //Remove selected from all
    $(".hover").removeClass("selected");
    
    //Add selected to clicked item
    $(this).addClass("selected");

})

＆＃13;

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

＆＃13;

Answer 2

切换一个类，如果它存在则将其删除，如果该类不存在则添加该类。在你的情况下有超过2个.hover div，你需要遍历每个div并删除'selected'类并添加'unselected'类。然后最后将“选中”添加到您正在执行的单击中。

IInputElement

切换选定的许多部分

2 个答案: