利用伪元素设置元素是否选中状态

最新推荐文章于 2023-03-09 15:01:05 发布

原创最新推荐文章于 2023-03-09 15:01:05 发布 · 941 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#伪元素 #选中 #:before #::after

本文介绍了一种使用CSS为列表项添加特定样式的技巧，并通过jQuery实现了列表项的点击事件，使得被点击的列表项可以拥有不同的背景颜色，同时取消其他列表项的激活状态。

li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: .36rem;
    height: .36rem;
    margin-top: -.18rem;
    border-radius: .36rem;
    border: .01rem solid #279ECD;
}

li.active::before {
    background-color: #279ECD;
}

$('ul').click('click','li',function(){
    $(this).addClass("active").siblings().removeClass("active");
})