样式:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#main {
width: 300px;
margin: 50px auto 0;
}
#menu ul li {
list-style: none;
float: left;
width: 100px;
height: 50px;
background-color: blueviolet;
text-align: center;
line-height: 50px;
}
#menu ul .active {
background-color: chartreuse;
}
#contain ul li {
list-style: none;
width: 300px;
height: 400px;
background-color: blue;
display: none;
}
#contain ul .active {
background-color: red;
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="menu">
<ul>
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
<div id="contain">
<ul>
<li class="active">内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$("#menu ul li").on("click", function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$("#contain ul li").removeClass("active").eq(index).addClass("active");
})
</script>
</body>
</html>