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>
小姐姐帮到你了,就记得点赞评论昂~😀