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

最新推荐文章于 2023-03-29 14:26:37 发布

CJW-Coder

最新推荐文章于 2023-03-29 14:26:37 发布

阅读量5k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42143163/article/details/98224148

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

效果图

<!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>

CJW-Coder

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
导航栏标签下划线的切换，默认选中第一个，点击的时候切换。

使导航栏中第一个标签默认有下划线，当鼠标划过别的导航的时候，下划线会换到别的导航下，当鼠标点击后，只有点击的那个标签有下划线，直到点击下一次的时候，下划线换到下一个被点击的标签. <!DOCTYPE html><html lang="zh"> <head> <...
复制链接

扫一扫