Question

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

Answer 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>

JS

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?

根据要求修改它。

Answer 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>

Answer 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"); 
    });
});

Answer 4

你可以尝试这样的事情：

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

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

突出显示div onclick

4 个答案: