导航栏标签下划线的切换，默认选中第一个，点击的时候切换。

亦凉 2021-11-09 08:54 531阅读 2赞

# 使导航栏中 第一个标签 默认有下划线，当鼠标划过别的导航的时候，下划线会换到别的导航下，当鼠标点击后，只有点击的那个标签有下划线，直到点击下一次的时候，下划线换到下一个被点击的标签. #

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]

<!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;
                    transition: all 0.3s ease;
    			}
    			.nav li:hover{
    				cursor: pointer;
    				border-bottom:2px solid #109dff;
    			}
    			.active{
    				border-bottom:2px 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]: /images/20211109/00e2079f891546e1864d2403c1be849e.png