<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: white;
}
#box{
400px;
height: 300px;
}
#box ul{
100%;
overflow: hidden;
}
#box ul li{
float: left;
50px;
height: 50px;
margin: 0 10px;
background-color: red;
text-align: center;
line-height: 50px;
}
.active{
70%;
height: 100px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a href="javascript:void(0)">张三</a>
</li>
<li>
<a href="javascript:void(0)">李四</a>
</li>
<li>
<a href="javascript:void(0)">王五</a>
</li>
<li>
<a href="javascript:void(0)">GAI六</a>
</li>
</ul>
<div class="active"></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#box ul li a').click(function () {
$(this).css('color', 'yellow').parent('li').siblings('li').find('a').css('color', '#fff');
var textVal = $(this).text();
var changeVal = `<h1>${textval}</h1>`;
$('.active').show().html(changeval);
// val() 对标签里边的值获取
})
})
</script>
</body>
</html>