<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航栏</title>
</head>
<body>
<style>
*{
box-sizing: border-box;
}
li {
list-style: none;
}
.nav {
width: 500px;
height: 60px;
margin: 0 auto;
}
.nav ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.nav li{
height: 60px;
line-height: 60px;
}
.nav li:hover{
cursor: pointer;
/* border-bottom:5px solid #109dff; */
}
.active{
border-bottom:5px solid #109dff;
}
</style>
<div class="nav">
<ul>
<li class="active">首页</li>
<li>我的</li>
<li>帮组中心</li>
<li>设置</li>
</ul>
</div>
<script>
let lis = document.querySelectorAll('.nav>ul>li')
console.log(lis)
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(event) {
let li = document.getElementsByClassName('active')[0]
li.classList.remove('active')
event.target.classList.add('active')
}
}
</script>
</body>
</html>
