jQuery在導航上添加/刪除類

如何在我的鏈接上創建不同的類，以便在點擊它們時顯示不同的圖像？jQuery在導航上添加/刪除類

這個想法是，鏈接有自己的顏色，當它激活時，必須有一個具有相同顏色的小箭頭。

這是我到目前爲止有：

HTML：

<ul> 
    <li class="red"><a href="#">Link one</a></li> 
    <li class="blue"><a href="#">Link two</a></li> 
</ul>

CSS：

.red {background-color:#f00; } 
.red_bnt { background-image:url(image/red_bnt_pil.png); } 

.blue {background-color:#00f; } 
.blue_bnt { background-image:url(image/red_bnt_pil.png); }

的jQuery：

<script type="application/x-javascript"> 

$('.red').click(function(){ 
    $('.red').removeClass('red_bnt'); 
    $(this).addClass('red_bnt'); 
}); 

</script>

然後重複藍色以及。

但它不工作...

我做錯了什麼？

來源

2011-07-28 Kasper

爲什麼要刪除不存在的類然後重新添加它？ – Andrew

描述功能如何工作，是否還有其他元素？ – jmav

如果第一個鏈接處於活動狀態，它必須具有類red_bnt，並且如果您單擊第二個鏈接，則必須刪除red_bnt類。這不是代碼的工作原理嗎？我是jQuery的新手，所以我可能不理解它的權利。 – Kasper

$('.red').click(function(){ 
    $('.red').removeClass('red_bnt'); 
    $(this).addClass('red_bnt'); 
});

你jQuery是說，點擊與類「紅」元素時，從所有元素刪除類「red_bnt」與「紅」類，然後添加red_bnt所點擊的元素。由於藍色按鈕沒有紅色類別，因此它甚至不會輸入等式。相反，向按鈕添加一個通用類，然後使用通用類名稱，如「active」，這將激活後臺CSS。

我想你的CSS更改爲：

.red.btn {background-color:#f00; } 
.red.hover, 
.red.active { background-image:url(image/red_bnt_pil.png); } 

.blue.btn {background-color:#00f; } 
.blue.hover, 
.blue.btn.active { background-image:url(image/blue_bnt_pil.png); }

的HTML到：

<ul> 
    <li class="red btn"><a href="#">Link one</a></li> 
    <li class="blue btn"><a href="#">Link two</a></li> 
</ul>

和jQuery來：

<script type="application/x-javascript"> 
$(function() { 
    $('li.btn').click(function(){ 
     // Add "active" to the clicked element and 
     // get all siblings and remove "active" from them 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 

    // Use this for hover 
    $('li.btn').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
}); 
</script>

這裏有一個的jsfiddle它：http://jsfiddle.net/FS4Du/。我用暗色和dodgerblue代替你的圖像。

注：我使用懸停類而不是僅僅重新使用活動，以避免必須處理被點擊的元素（活動元素）然後被懸停的情況。

來源

2011-07-28 08:16:18

這解釋了爲什麼我的代碼無法正常工作。謝謝。我試過了你寫的東西，但是當我點擊鏈接時沒有任何反應是否因爲=「red bnt」之間的空格？ – Kasper

看起來好像這個班級沒有添加 – Kasper

@kasper首先，注意我使用了「btn」而不是「bnt」，可能就是這樣。其次，它們之間的空間表明它們是兩個不同的類（一個「紅色」類和一個「btn」類）。 –

我的事情UR使用相同的影像既類,,

.red_bnt { background-image:url(image/**red_bnt_pil.png**); } 

.blue {background-color:#00f; } 
.blue_bnt { background-image:url(image/**red_bnt_pil.png**); }

........................... ...........

來源

2011-07-28 08:22:23 K6t

輸入失敗:)抱歉。（圖像/ blue_bnt_pil.png） – Kasper

jQuery在導航上添加/刪除類

回答

相關問題