更改颜色<li> </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中这样做？

试过这个解决方案：link!但似乎对我不起作用

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，那么这个复选框hack可能是你最好的选择...... 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 Demo