Как при клике на элемент из списка, добавить ему класс? При этом выбрать можно только 1 элемент
3 ответа
Например так (jq):
$('li').on('click', function(){
$(this).toggleClass('active')
.siblings()
.removeClass('active');
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
</ul>
Так как выбрать можно только один, то при клике есть текущий активный элемент и элемент по которому щелкнули. Нужно просто применить к ним toggleClass
$('li').on('click', function() {
$('.active').add(this).toggleClass('active');
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
</ul>
Если не нужно убирать выбранный, нужно проверить, что у элемента по которому щелкнули нет класса active
$('li').on('click', function() {
if (this.classList.contains('active')) return;
$('.active').add(this).toggleClass('active');
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
</ul>
И последний вариант без использования jQuery
[].forEach.call(document.querySelectorAll('li'), function(li) {
var active = document.getElementsByClassName('active');
li.addEventListener('click', function() {
if (this === active[0]) this.classList.remove('active');
else {
if (active[0]) active[0].classList.remove('active');
this.classList.add('active');
}
});
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
</ul>
И без использования jQuery без возможности снять выделение со всех
[].forEach.call(document.querySelectorAll('li'), function(li) {
var active = document.getElementsByClassName('active');
li.addEventListener('click', function() {
if (active[0]) active[0].classList.remove('active');
this.classList.add('active');
});
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
</ul>
Примерно так:
$('#list li').click(function(){
$(this).addClass('test-class');
});