如何使用jQuery添加和刪除活動類？

我有一個無序列表。如何使用jQuery添加和刪除活動類？

<style> 
    #button1 { position:relative; z-index: 3; } 
    #button2 { position:relative; z-index: 2; } 
    #button3 { position:relative; z-index: 1; } 
</style> 

<ul> 
    <li id="button1">Button 1</li> 
    <li id="button2">Button 2</li> 
    <li id="button3">Button 3</li> 
</ul>

我目前使用CSS來給每個ID一個不同的Z - 索引，以便一個按鈕稍微在下一個。我想要做的就是使用jQuery添加一個類，該類添加一個更高的z-index到任何按鈕被點擊的位置，例如'999'，以確保它將位於另外兩個按鈕之上。我無法弄清楚如何將活動類添加到當前點擊的<li>，同時從當前設置的任何按鈕中刪除活動類。我不知道如何讓jQuery找出其他兩個<li>中的哪一個在按下新按鈕之前設置了活動類。我會怎麼做呢？

此外，我不知道是否添加一個類將解決問題，因爲我已經設置了Z-index的目標是<li>的ID。也許我需要影響當前按下按鈕的內聯css，因此它會覆蓋id的css，並且還會檢查其他兩個內聯css z-index設置爲「999」中的哪一個，以便它可以刪除它們內聯CSS，並有一個比其他兩個按鈕更大的Z-index，並出現在頂部？

來源

2009-11-02 zeckdude

採取了Kobi的回答得遠一點。如果可能的話，我會給li（s）一些普通的類，或者給ul一個id。

var $li = $('li.clickMe'); // or var $li = $('#id li'); 

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

如果您要根據ID設置z-index，那麼ID的css規則可能優先於任何基於類的規則。你可以把z-index屬性內聯並用jQuery改變它。

var $li = $('li.clickMe'); // or var $li = $('#id li'); 

$li.click(function(){ 
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1. 
    $(this).css('z-index', 999); 
});

來源

2009-11-02 11:59:16 smack0007

你的解決方案更接近，但是當它將li的z-index中的一個更改爲999時，它會將內聯css z-index加1，而另外兩個，而我只是希望它刪除其他內聯css兩個，所以它恢復到它們原來的z-index值。 – zeckdude 2009-11-02 12:10:57

我覺得這行：$（this）.css（'z-index'，999）;可以改爲：$（this）.css（'z-index'，''）;並應該刪除它。如果你真的希望它恢復，但你應該只使用類。 – smack0007 2009-11-02 12:20:48

，如果我理解正確，應該是

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

編輯 - 你遇到一個CSS問題 - #id規則優先於.class規則。

要回答你的問題，你可以使用設置的z-index：

$(this).css('z-index', 999);

來源

2009-11-02 11:50:17 Kobi

關閉，但不起作用，因爲我已經在每個按鈕上都有id，id由於某種原因覆蓋了類，所以當活動類設置時，它仍然不會改變z -index – zeckdude 2009-11-02 12:00:03

有沒有什麼辦法可以在當前單擊按鈕上設置內聯css，同時從另外兩個按鈕中刪除內聯css？ – zeckdude 2009-11-02 12:01:16

嘗試在你的CSS更具體。例如，li.active或ul li.active，以便您比ID的樣式更具體。另外，僅分配z-index：999並不是一個好習慣。這只是邀請其他人分配z-index：9999;別的地方。沒有理由你不能查看你的代碼並查看所有的z-索引任務，只需要更高一些，或者如果你想在稍後做一些其他事情，。 – 2009-11-02 12:09:41

最好的做法是使用類，但你也可以修改樣式屬性，就像

$('li').click(function(){ 

    var li = $(this); 

    // check the highest z-index 
    var maxIndex = 4; 

    $('li').each(function(){ 
    var zindex = $(this).css("z-index"); 
    if (parseInt(zindex) > maxIndex) 
    { 
     maxIndex = parseInt(zindex); 
    } 
    }); 

    // increment by 1 
    maxIndex++; 

    li.css('z-index', maxIndex); 
});

來源

2009-11-02 12:03:14

難道你不能保存'maxIndex'作爲一個全局變量嗎？你真的必須每次循環才能得到它嗎？無論如何，你會得到+1，因爲我在看到你的答案之前編輯了我的答案。 – Kobi 2009-11-02 12:09:13

因此，您只需將最新點擊的li一個z-索引比先前點擊的li的z-索引更高？這是一個有趣的解決方案。謝謝！它真的需要如此深入嗎？ – zeckdude 2009-11-02 12:13:55

@ kobi：我們可以這樣說，但這是最安全的方式。如果我們有太多的li元素，那麼我們不應該循環，使它成爲全局變量。 – 2009-11-02 12:38:59

通過看你的答案，在找到的兄弟姐妹選擇，我想通了一個答案這很簡單，適合我。請告訴我，除了我沒有使用課程外，是否有任何問題。我認爲對我的情況來說，它很好用！謝謝你們所有人的幫助！

$('li').click(function(){ 
     $(this).css({'z-index' : '999'}) 
     .siblings().css({'z-index' : ''}); 
});

由於smack0007的回答讓我最讓我使用，我給他/她勾選答案。

來源

2009-11-02 12:50:50 zeckdude

他。我認爲我的方式實際上會更快一些，因爲我的DOM會發燒。我沒有統計數據可以支持這一點，如果速度很好，誰會在乎。 – smack0007 2009-11-02 13:02:49

這是另一種方法......它存儲z-index並在不是活動按鈕時替換它。

$(document).ready(function(){ 
var indx = $('li[id*="button"]').length; 
$('#button1').addClass('active'); 
$('li[id*="button"]').each(function(){ 
    $(this).css('z-index',indx).data('zindx', indx); 
    $(this).click(function(){ 
    var active = $('.active'); 
    active.css('z-index', active.data('zindx')).removeClass('active'); 
    $(this).addClass('active').css('z-index',999); 
    }) 
    indx--; 
}) 
})

來源

2009-11-02 13:16:53 Mottie

如何使用jQuery添加和刪除活動類？

回答

相關問題