换颜色<li>

Question

我正在进行一项调查，现在我要做的是，当有人单击列表中的答案（例如：8）时，该答案的背景会更改颜色。 这必须适用于每个单独的答案（有60个问题）。

列表html / css代码：

<div class="answers">
    <ul>
        <li class="liFirst">1</li>
        <li class="liMiddle">2</li>
        <li class="liMiddle">3</li>
        <li class="liMiddle">4</li>
        <li class="liMiddle">5</li>
        <li class="liMiddle">6</li>
        <li class="liMiddle">7</li>
        <li class="liMiddle">8</li>
        <li class="liMiddle">9</li>
        <li class="liLast">10</li>
    </ul>
</div>

.answers {
  float: right;
  width: 400px;
  height: auto;
  margin: 0;
  background: #DFE5E3;
}

.answers ul {
  display: inline-block;

}

.answers li {
  float: left;
  padding: 0 auto; 
  font-weight: bold;
}

我已经对其进行了一些研究，但似乎找不到有效的解决方案。 我想我必须在JS / jQuery中执行此操作？

尝试了以下解决方案： 链接！ 但似乎不适合我

Answer 1

添加活动班级

.active{
    background:#000;
    color:#FFF;
}

并在jQuery切换类

$('ul li').on('click',function(){
   $(this).toggleClass('active');
});

如果他只想选择一个答案

$('ul li').on('click',function(){
   $(this).toggleClass('active').siblings().removeClass('active');
});

Answer 2

您可以执行以下操作：

JQuery的

$(document).on('click', '.answers ul li', function(){
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

CSS

.answers li.selected {
    background: yellow;
}

你可能想删除选定的背景效果一个其他<li>一度你点击一个。

DEMO

Answer 3

如果您想严格按照CSS进行操作，则此复选框黑客可能是您最好的选择... http://css-tricks.com/the-checkbox-hack/

也可以通过单选按钮来实现，以确保只能选择一个答案。

Answer 4

jQuery的

$( "ul" ).on( "click", "li", function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
});

CSS

.selected { background-color:lime;}  

JSFiddle演示