突出显示 div onclick [重复]答案

【问题标题】：Highlight div onclick [duplicate]突出显示 div onclick [重复]
【发布时间】：2015-06-13 03:48:18
【问题描述】：

我有一个问题，需要使用什么 jQuery 代码来突出显示单击列表中的 DIV？我有 8 个 Div，我需要突出显示一个被点击的，当点击下一个时，前一个不再突出显示。

【问题讨论】：

使用您想要的背景颜色创建一个 CSS 类，然后单击将类添加到 div，反之亦然。您可能需要查看 .toggleClass()
没有代码来演示这个问题与安迪建议的问题有何不同，我恐怕我要关闭这个问题作为另一个问题的副本。如果您认为这是一个错误，请使用足够相关的minimal、“MCVE”HTML、CSS 和 jQuery/JavaScript 更新您的问题，以便我们可以重现您的问题。

标签： javascript jquery html css

【解决方案1】：

好的，那么试试这个：-

JSFiddle-http://jsfiddle.net/dtzjN/198/

您需要做的就是，在所有 div 中有一个公共类，点击时，从其他所有 div 中删除颜色类，并为点击的 div 添加一个颜色类。

<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>

var addclass = 'color';
var $cols = $('.divs').click(function(e) {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
});

CSS

.color {
    background-color: yellow;
}

来源：-How can I highlight a selected list item with jquery?

根据需要修改。

【讨论】：

【解决方案2】：

试试下面的

$(document).ready(function() {

  $Divs = $("div");

  $Divs.click(function() {
    $Divs.removeClass("highlight");
    $(this).addClass("highlight");

  });
});

.highlight {
  background: green;
}
div {
  display: block;
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>First Div</div>
  </li>
  <li>
    <div>Second Div</div>
  </li>

</ul>

【讨论】：

【解决方案3】：

http://jsfiddle.net/uf4jxn5y/

<ul>
    <li><div>Html 1</div></li>
    <li><div>Html 2</div></li>
    <li><div>Html 3</div></li>
</ul>

还有 JS

$(document).ready(function() {
    $("li div").click(function() {
        $("li div").each(function() {
           $(this).css("background-color", "transparent"); 
        });
       $(this).css("background-color", "#ff3300"); 
    });
});

【讨论】：

【解决方案4】：

你可以试试这样的：

$('.mainDiv').on('click','.divs',function () {
  $(this).parent().find('.divs').css('background-color', '');
  $(this).css('background-color', '#00fff0');
});

http://jsfiddle.net/HABdx/649/

【讨论】：