点击列表背景变色-active伪类

最新推荐文章于 2023-10-10 21:19:59 发布

如鲸向海

最新推荐文章于 2023-10-10 21:19:59 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签：前端

本文链接：https://blog.csdn.net/qq_41828329/article/details/108333733

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

类似微信列表点击变灰

问题：uni-app项目，实现点击列表进入详情时，点击该列表背景颜色变灰，类似微信点击好友列表进入聊天界面列表颜色变灰。
解决该问题时我一开始加了一个点击事件，事件绑定一个css样式用于改变背景颜色，如下：

<body>
    <div id="app">
        <div @click="btnClick(index)" :class="{active:index==isActive}" v-for="(item,index) in arr"}
            {{item}}
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                arr: ['a', 'b', 'c'],
                isActive: 0
            },
            methods: {
                btnClick: function (index) {
                    this.isActive = index;
                }
            }
        })
    </script>
    <style>
        .active {
            color: red;
        }
    </style>
</body>
 
</html>

解决

但是上面有一个问题，这样只能改变背景颜色，不能再变回来，然后又查了资料发现，其实设置一个active伪类就可以了，上面的算是饶了一个大弯吧。

.list_sty :active{
background-color:#f7f7f7;

如鲸向海

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录