分别解析 JS tab切换 和 jq tab切换

CSS样式

flex布局

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            display: flex;
            width: 100vw;
            height: 100vh;
        }
        .left{
            width: 200px;
        }
        #ul>li{
            margin-top: 5px;
            background: khaki;
            text-align: center;
            line-height: 70px;
            font-size: 18px;
            color: rebeccapurple;
        }
        #ul>.active{
            background: salmon;
        }
        .right{
            flex: 1;
        }
        #div>h2{
            display: none;
        }
        #div>.show{
            display: block;
        }
    </style>

HTML布局

 <div id="box">
        <div class="left">
            <ul id="ul">
                <li class="active">😀</li>
                <li>😀</li>
                <li>😀</li>
                <li>😀</li>
            </ul>
        </div>
        <div class="right">
            <div id="div">
                <h2 class="show">🐖</h2>
                <h2>🐖🐖</h2>
                <h2>🐖🐖🐖</h2>
                <h2>🐖🐖🐖🐖</h2>
            </div>
        </div>
    </div>

JS tab切换

// 触发点击事件，获取ul和div的元素节点
	var ul=document.getElementById("ul").children;
    var tab=document.getElementById("div").children;
// 准备触发点击事件，因为ul与div每一项对应，需要循环
// 首先给ul下的li每一项一个onclick
// 题目需求。需要点击到的事件高亮显示，其他无高亮
// 要有默认的高亮项，所以需要一个内部再次循环，先清除所有高亮
// 清除高亮，因为需要点击高亮显示，在默认一个高亮项即可
    for( let i=0;i<ul.length;i++){
        ul[i].onclick=function(){
            for( var j=0;j<ul.length;j++ ){
                ul[j].classList.remove("active");
                tab[j].classList.remove("show")
            }
            ul[i].classList.add("active");
            tab[i].classList.add("show")
        }
    }

jq tab切换

（记得载入jquery文件）

<script src="./jquery-3.5.1.js"></script>
<script>
		// index() 获取下标
        // siblings() 所有同辈元素
        // eq(index)  获取指定下标的元素
        $("#ul>li").on("click",function (){
            var index=$(this).index()
            // 当前点击dom 添加 class --active  其他的兄弟元素 移除  class --active
            $(this).addClass("active").siblings().removeClass("active")
            $("div>h2").eq(index).addClass("show").siblings().removeClass("show")
        })
    </script>

小姐姐帮到你了，就记得点赞评论昂~😀