给选项的点击事件设置背景色

我想鼠标点击选项卡的时候设置背景色，但我不知道应该如何写在scrip里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #tab {
            width: 275px;
            height: 190px;
            margin: 20px 200px;
        }

        .tabscon {
            width: 600px;
            height: 350px;
            border: 1px solid #7396B8;
        }

        .firstnav li {
            display: inline-block;
            width: 80px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #999;
            border-bottom: none;
            margin-right: 5px;
            cursor: pointer;
        }

        section {
            display: none;
            padding:30px 20px;
            line-height: 1.5;
            text-indent: 2em
        }

        .tabscon .conactive {
            display: block
            
        }
    </style>
</head>

<body>
    <main>
        <div class="tabsbox" id="tab">
            <nav class="firstnav">
                <ul>
                    <li class="liactive">前端开发</li>
                    <li>软件测试</li>
                    <li>云计算</li>
                </ul>
            </nav>

            <div class="tabscon">
                <section class="conactive">
                    前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
                    前端开发从网页制作演变而来，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
                </section>
                <section>
                    软件测试，描述一种用来促进鉴定软件的正确性、完整性、安全性和质量的过程。其经典定义为：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。换句话说，软件测试是一种实际输出与预期输出之间的审核或者比较过程。
                </section>
                <section>云计算是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序，然后通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算是分布式计算、效用计算、并行计算、网络存储、热备份冗杂和虚拟化等计算机技术混合演进并跃升的结果。</section>
            </div>
        </div>

    </main>
    <script>
        var that
        class Tab {
            constructor(id) {
                //获取元素
                that = this
                this.main = document.querySelector(id)
                this.lis = this.main.querySelectorAll('li')//特意加this，获取大盒子里的小盒子
                this.sections = this.main.querySelectorAll('section')
                //li的父元素
                this.ul = this.main.querySelector('.firstnav ul:first-child')
                //section的父元素
                this.tabscon = this.main.querySelector('.tabscon')
                this.init()//初始化放在这里，外部new的时候自动调用
            }
            //初始化操作让相关元素绑定事件
            init() {
                for (let i = 0; i < this.lis.length; i++) {
                    this.lis[i].addEventListener('click', () => { this.toggleTab(i); }, false)
                }
            }
            //清除所有的li和section的类
            clearClass() {
                for (let i = 0; i < this.lis.length; i++) {
                    this.lis[i].className = ''
                    this.sections[i].className = ''
                }
            }
            toggleTab(index) {
                that.clearClass()
                that.lis[index].className = 'liactive'
                that.sections[index].className = 'conactive'//利用全局变量that保存constructor里面的this
            }
        }

        new Tab('#tab')//把整个大的div作为参数对象传进去
    </script>
</body>

</html>
看到你类的方法里面写了点击改变类名
css样式里面是不是少了一个 .liactive 需要改变的样式写在这里面就可以了