<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 500px;
border: 1px solid red;
user-select: none;
}
.title{
display: flex;
align-items: center;
}
.title li {
padding: 10px 0px;
flex: 1;
text-align: center;
border-radius: 5px;
list-style: none;
cursor: pointer;
}
.title li.active{
background-color: red;
color: azure;
}
.content li {
display: none;
}
</style>
class="container">
<ul class="title">
<li class="active">雪糕1</li>
<li>雪糕2</li>
<li>雪糕3</li>
</ul>
<ul class="content">
<li style="display: block;">巧克力</li>
<li>冰淇淋</li>
<li>哈密瓜</li>
</ul>
$(function(){
$('.container li').click(function(){//获取container 下面的所有li 给其添加单击事件
let index =$(this).index()//获取鼠标点击的下标
console.log(index);
$(this).addClass('active').siblings('.active').removeClass('active')//点击时在这上面添加active类名 获取兄弟元素上的active类名 将active移除
$('.content li ').eq(index).show().siblings().hide()//获取content下面的所有li eq获取这个下标 让他显示出来 兄弟元素隐藏
})
})
