Jquery单击每个li改变样式

//图片如下:

//css

<style>
    *{
    
    margin: 0;padding: 0;}
    div{
    
    
        min-height: 700px;
    }
    .main{
    
    
        width: 80%;
        height: auto;
        min-height: 700px;
        margin: 0 auto;
    }
    .left,.right{
    
    
        border: 1px solid #bbbbbb;
    }
    .left{
    
    
        width: 15%;
        height: auto;
        float: left;/*左浮动*/
    }
    .right{
    
    
        width: 80%;
        height: auto;
        float: right;/*右浮动*/
    }
    ul{
    
    
        list-style: none;
        line-height: 50px;
    }
    .left ul li{
    
    
        border-bottom: 1px solid #bbbbbb;
        padding-left: 50px;
    }
    .right ul{
    
    
        padding: 10px 40px;
    }
    .right ul li{
    
    
        border-bottom: 1px dashed #bfbfbf;
    }
    .active{
    
    
        background-color: #00a0e9;
        color: #fff;
    }
    .activex{
    
    
        color:#429CE3;
        font-weight: bold;
    }
    .right ul li span{
    
    
        float: right;/*右浮动*/
        padding-right: 10px;
    }
</style>

//html

<div class="main">
    <div class="left">
        <ul>
            <li class="active">政策动态</li>
            <li>协会动态</li>
            <li>访谈报告</li>
            <li>能源会议</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li class="activex">关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
            <li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
        </ul>
    </div>
</div>

//Javascript

<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script>
    //左
    //Jquery单击事件
    $(".left ul").on("click","li",function(){
    
    
        $(".left ul li").removeClass("active");//删除class
        $(this).addClass("active");//添加class
    });//添加class

    //右
    //Jquery单击事件
    $(".right ul").on("click","li",function(){
    
    
        $(".right ul li").removeClass("activex");//删除class
        $(this).addClass("activex");//添加class
    });

</script>