刪除li上的類屬性點擊

我在html中有以下代碼。我只想在我們點擊其他li並將活動類添加到點擊它的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")); 
}

編輯腳本，它工作。

來源

2016-11-30 Narayana Vakkalagadda

你可以寫一行綁定到該菜單中的所有元素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>

來源

2016-11-30 20:59:56 jmcgriz

謝謝@jmcgriz。 –

歡迎，快樂編碼。 – jmcgriz

我不確定我可以在這裏問另一個與此有關的問題。如何在刪除或添加類之前獲取當前活動li的值。我試過這種方式。 $（this）.siblings（）。find（'[class =「active」]'）。first（）.val（）and $（this）.siblings（）。find（'[class =「active」]' ）.val（）和$（this）.siblings（）。find（「active」）.val（），全部說undefined。 –

您的選擇不正確。使用#paginationUL[class="pagination"] li[class="active"]或ul.pagination li.active或#paginationUL li.active

來源

2016-11-30 20:53:04 randominstanceOfLivingThing

爲什麼'#paginationUL [類= 「分頁」]的Li [類= 「活性」]'代替'#paginationUL li.active' – j08691

何必指定一類'＃ paginationUL'？根據定義，應該只有其中之一。 – BenM

您的選擇器不正確。您需要使用的ID（#）或類（.）選擇：

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

不過，你最好不要使用侵入式的事件處理程序，並且相當做沿着以下線的東西：

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

後一個例子會將一類active應用於clicked元素，並將其從<ul>中的任何其他元素中移除。

來源

2016-11-30 20:53:23 BenM

謝謝你BenM。這也工作。 –

您可以使用類似這樣

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

來源

2016-11-30 20:54:36 Ajaykumar

如果你正在使用jQuery這應該這樣做：

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

來源

2016-11-30 20:57:31 brunouno

刪除li上的類屬性點擊

回答

相關問題