js默认选中导航栏第一个,点击其他链接进行切换

爬楼梯的小新

已于 2022-02-28 16:06:00 修改

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2021-07-29 11:20:17 首次发布

原文链接：https://blog.csdn.net/qq_42143163/article/details/98224148?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommen

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

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

方法二： html

	<div class="nav">
		<ul>
			<li class="active">首页</li>
			<li>导航栏</li>
			<li>帮助</li>
		</ul>
	</div>

js：

<script>
	var nav = document.querySelector('.nav');
	var lis = nav.querySelectorAll('li');
	//for循环绑定点击事件
	for ( var i=0;i<lis.length;i++){
		lis[i].onclick = function (){
			//其余li清楚class这个类
			for ( var i=0;i<lis.length;i++){
				lis[i].className ='';
			}
			//只留下点击当前的
			this.className = 'active'
		}
	}
</script>