удаление атрибута класса из li по клику

Question

У меня есть следующий код в html. Я просто хочу удалить активный класс, когда мы нажимаем на другое li и добавляем активный класс в li, на который он нажимается.

<ul class="pagination" id="paginationUL"> 
    <li class="active"><a href="#">1</a></li> 
    <li onclick="javascript:selectThis()"><a href="#">2</a></li> 

Я попытался удалить класс первый и он не работает. Пожалуйста, предложите.

function selectThis() { 
    $('ul[class="pagination"] li[class="active"]').removeClass("active")); 
} 

редактировал сценарий и он работает.

Answer 1

Вы можете написать строку для связывания всех li элементов в этом меню. Селектор $(this) действует против элемента, нажатого, а при использовании .siblings() действует на всех остальных дочерних элементов li.

$('#paginationUL > li').click(function(){ 
 
    $(this).addClass('active').siblings().removeClass('active') 
 
})

.active { background: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="pagination" id="paginationUL"> 
 
    <li class="active"><a href="#">1</a></li> 
 
    <li><a href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
</ul>

Answer 2

Ваш селектор неверен. Использовать #paginationUL[class="pagination"] li[class="active"] или ul.pagination li.active или #paginationUL li.active

Answer 3

Ваши селекторы неверны. Вы должны использовать идентификатор (#) или класс (.) селектор:

$('#paginationUL li.active').removeClass("active"); 

Однако, вы лучше не использовать интрузивные обработчики событий, а скорее делать что-то вдоль линий следующее:

$('#paginationUL > li').on('click', function() { 
    $(this).addClass('active').siblings('.active').removeClass('active'); 
}); 

Последний пример применит класс active к элементу с щелчком и удалит его из любых других элементов в <ul>.

Answer 4

Вы можете использовать что-то вроде этого

$("#paginationUL li").click(function() { 
    $(this).toggleClass("active"); 
    $(this).siblings().removeClass("active"); 
}); 

Answer 5

Если вы используете JQuery, это должно сделать это:

$('#paginationUL li').click(function(){ 
    $('#paginationUL li').removeClass("active"); 
    $(this).addClass('active'); 
});