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










