Javascript 突出显示选定的分区

我有两个或更多的div，第一个被选中。单击另一个div时，该div将被选中。我用背景色做这个

CSS:

.red {background: red}

<div class="foo">...</div>
<div class="foo">...</div>
<div class="foo">...</div>

$('.foo').click(function(){
 //$(this).toggleClass('red') Not ideal as the active div must always be red
 // If selected, remove all red classes then add class?
});

HTML:

.red {background: red}

<div class="foo">...</div>
<div class="foo">...</div>
<div class="foo">...</div>

$('.foo').click(function(){
 //$(this).toggleClass('red') Not ideal as the active div must always be red
 // If selected, remove all red classes then add class?
});

由于这是一个事件单击，我不知道如何删除所有其他红色类并将红色类添加到单击的div

简而言之，选中时，“突出显示”

div

，如果刷新页面，则第一个

div

的背景应为红色，因为这是选中的

div

使用方法获取同级元素并从中删除

red

类

$('.foo').click(function() {
  $(this).addClass('red') // add class to clicked element
    .siblings() // get siblings
    .removeClass('red'); // remove class from sibling elements 
});

$（'.foo'）。单击（函数（）{
$（this.toggleClass（'red'））
.sides（）.removeClass（'red'）
});
.red{
背景：红色
}

...
...
…你想要这样吗


$（“#根”）.bind（“单击”，函数（e）{
$（“#root”）.find（“.foo”）.removeClass（“红色”）；
$（e.target）.addClass（“红色”）；
})
.red{背景：red}

...
...
...
这是您想要的JS

$('.sample').click(function() {
  $(this).addClass('addColor')
    .siblings().removeClass('addColor')
});

最好使用一个类名来说明为什么某些东西看起来是这样的，而不是它看起来是怎样的。在这里，您可以使用
突出显示
.highlight{background:blue；}
比
更有意义。red{background:blue；}
@Arjan我的名字都是垃圾，但这正是我正在研究的。简而言之，我只想给所选的div一个背景色。如果单击两次，背景色不会改变。在更深入的研究中，这个问题重复了很多感谢支持的问题，我可以在其他项目中使用它们。我不想使用
toggleClass
，因为它会删除类。但当使用
addClass
时，此选项有效。你看，如果我两次单击同一个div，该类将使用toggle进行添加和删除。@Sylar：如果你不想切换，请使用
addClass