办公室玩弄爆乳女秘hd,成人免费va视频

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何使用 jQuery 實(shí)現(xiàn)點(diǎn)擊列表項(xiàng)時(shí)背景色和圖標(biāo)變白的效果？

霞舞

發(fā)布： 2024-10-30 15:55:51

原創(chuàng)

530人瀏覽過(guò)

如何使用 jquery 實(shí)現(xiàn)點(diǎn)擊列表項(xiàng)時(shí)背景色和圖標(biāo)變白的效果？

jquery 改變列表項(xiàng)目樣式

為了實(shí)現(xiàn)點(diǎn)擊列表項(xiàng)（li）時(shí)其背景色和圖標(biāo)變白的效果，我們可以使用 jquery 代碼。

首先，我們可以將 css 樣式應(yīng)用于 li 元素：

.ser_ul li {
  float: left;
  height: 40px;
  line-height: 40px;
  border: 1px solid #c4dbed;
  border-bottom: none;
  text-align: center;
}

登錄后復(fù)制

然后，使用 jquery 來(lái)處理點(diǎn)擊事件：

$('.ser_ul li').click(function() {
  // 將所有 li 的背景色和圖標(biāo)恢復(fù)為默認(rèn)樣式
  $('.ser_ul li').css('background-color', 'white');
  $('.ser_ul li img').css('opacity', '0.2');

  // 將當(dāng)前點(diǎn)擊的 li 的背景色和圖標(biāo)設(shè)置為白色
  $(this).css('background-color', '#557fb9');
  $(this).find('img').css('opacity', '1');
});

登錄后復(fù)制

此代碼將為點(diǎn)擊的 li 元素設(shè)置樣式，并恢復(fù)其他 li 元素的默認(rèn)樣式。

此外，可以添加懸停事件來(lái)在鼠標(biāo)懸停在 li 上時(shí)更改樣式：

$('.ser_ul li').hover(function() {
  $(this).css('background-color', '#557FB9');
  $(this).find('img').css('opacity', '1');
}, function() {
  $(this).css('background-color', 'white');
  $(this).find('img').css('opacity', '0.2');
});

登錄后復(fù)制

以上就是如何使用 jQuery 實(shí)現(xiàn)點(diǎn)擊列表項(xiàng)時(shí)背景色和圖標(biāo)變白的效果？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！