Выделить div onclick

Question

У меня вопрос, какой код jQuery нужно использовать, чтобы выделить DIV в списке по клику? У меня есть 8 Div, мне нужно выделить тот, который нажат, а при нажатии на следующий предыдущий больше не выделяется.

Answer 1

Хорошо, Так что попробуйте это: -

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

Все, что вам нужно сделать, это, имеют общий класс во всех div, щелкнуть, удалить класс цвета из каждого другого div и dd класс цвета для щелкнутого 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

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 3

Вы можете попробовать что-то вроде этого, может быть:

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

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

Answer 4

Попробуйте ниже

$(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>