仅突出显示具有相同类的少数部分中的一个

Question

当用户点击某个部分中的单选按钮时，该部分应突出显示（背景颜色）。

但是，当他点击另一个部分的广播时，旧的突出显示的广告应该返回默认的非突出显示颜色。

以下是我的内容 - http://jsfiddle.net/VaclavZeman/Xd596/

我很确定通过jQuery这是可能的，但由于我不是很擅长，我不知道如何。

这是我已经完成的一些草稿，但它不适用于JSFiddle。

$(".reference").click(function(){
  $(this).addClass("selected");
});

如何突出显示其中一个部分？如果用户点击其他部分（.reference），如何删除旧部分中的类？

Answer 1

首先使用.removeClass()作为课程＆amp;然后使用$(this).addClass()

http://jsfiddle.net/Xd596/3/

$(".reference").click(function () {
    $(".reference").removeClass("selected");
    $(this).addClass("selected");
});

Answer 2

$(".radio").click(function(){
  $('.reference').removeClass('selected');
  $(this).closest('.reference').addClass("selected");
});

.radio是您的复选框

closest('.reference')会将最近的section代码与class="reference"

匹配

小提琴：http://jsfiddle.net/v9DQe/1/