如何使用 jQuery 实现点击列表项时背景色和图标变白的效果？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何使用 jQuery 实现点击列表项时背景色和图标变白的效果？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

jquery 改变列表项目样式

为了实现点击列表项（li）时其背景色和图标变白的效果，我们可以使用 jquery 代码。

首先，我们可以将 css 样式应用于 li 元素：

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

然后，使用 jquery 来处理点击事件：

$('.ser_ul li').click(function() {
  // 将所有 li 的背景色和图标恢复为默认样式
  $('.ser_ul li').css('background-color', 'white');
  $('.ser_ul li img').css('opacity', '0.2');

  // 将当前点击的 li 的背景色和图标设置为白色
  $(this).css('background-color', '#557fb9');
  $(this).find('img').css('opacity', '1');
});

此代码将为点击的 li 元素设置样式，并恢复其他 li 元素的默认样式。

此外，可以添加悬停事件来在鼠标悬停在 li 上时更改样式：

$('.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');
});

本篇关于《如何使用 jQuery 实现点击列表项时背景色和图标变白的效果？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！