<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>
ul{
display: flex;
list-style: none;
position: relative;
}
ul>li{
width: 148.5px;
height: 48px;
line-height: 48px;
text-align: center;
border: 1px solid red;
}
.div1{
position: absolute;
left:40px;
top:50px;
width: 450px;
height: 450px;
border: 1px solid red;
display:none;
}
</style>
</head>
<body>
<ul>
<li>体育
<div class="div1" style="display: block;">
<p>詹姆斯大战科比</p>
<p>杜兰特大战詹姆斯</p>
<p>库里大战伦纳德</p>
</div>
</li>
<li>学校
<div class="div1">
<p>某学生学业有成</p>
<p>某学生月入过万</p>
<p>某学生毕业找不到工作</p>
</div>
</li>
<li>
明星
<div class="div1">
<p>某学生和某一女明星谈恋爱</p>
<p>某学生和某一男明星谈恋爱</p>
<p>某学生和明星合照</p>
</div>
</li>
</ul>
<div>
</div>
<script src="./jquery-3.6.0.js"></script>
<script>
// console.log( $('li') )
/* 点击当前的变色 其他的不变 */
$('ul>li').click(function(){
console.log( $(this) );
$(this).css('background','red').siblings().css('background','');
$(this).children().css({display:'block'})
$(this).siblings().children().css({display:'none'});
})
</script>
</body>
</html>
