css样式在点击以后显示背景色？

css样式在点击以后显示背景色怎么设置，不是鼠标滑过的效果是这种鼠标点击以后背景色停留

img

js点击的时候给当前加个class

点击的时候，给当前点击的 加样式 ，其它的移除
参考
https://www.cnblogs.com/zaoansijia/p/4484217.html
实际上 和选项卡 效果类似
https://www.cnblogs.com/scc-/p/9507645.html

js也可以实现 搜一下 js实现选项卡

要用到js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            li {
                list-style: none;
            }
            li:hover {
                background-color: #eee;
            }
            li.active {
                background-color: teal;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var lis = document.getElementsByTagName('li')
            console.log(lis)
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function() {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].className = ''
                    }
                    this.className = 'active'
                }
            }
        </script>
    </body>
</html>