浅谈原生JS实现二级导航（优缺点与局限性）

最新推荐文章于 2023-09-08 09:03:22 发布

骆小胖

最新推荐文章于 2023-09-08 09:03:22 发布

阅读量707

点赞数 2

分类专栏：常见特效教学笔录 JS 笔记随笔前端积累文章标签：常见特效教学笔录 JS 笔记随笔前端积累 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819080

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

【前言】

本文简单说下js实现二级导航

【主体】

（1）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.nav{
			width: 80%;
			height: 40px;
			line-height: 40px;
			margin: auto;
		}
		.nav>li{
			float: left;
			min-width: 150px;
			position: relative;
			padding-bottom: 10px;
		}
		.nav>li>a{
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			text-align: center;
			color: white;
		}
		.nav>li>ul{
			position: absolute;
			top: 50px;
			background: rgba(0,0,0,0.2);
			min-width: 150%;
			left: -25%;
			height: auto;
			display: none;
		}
		.nav>li>ul>li>a{
			text-align: center;
			display: block;
			width: 100%;
			height: 100%;
			color: white;
		}
		.nav>li>a:hover{
			background: rgba(0,0,0,0.4);
		}
		.nav>li>ul>li>a:hover{
			background: rgba(0,0,0,0.4);
		} 
        .nav > li.active > ul{
            display: block;
        }
	</style>
	<link rel="stylesheet" type="text/css" href="img/animate.css">
</head>
<body>
<ul class="nav">
	<li>
		<a href="#">首页</a>
	</li>
	<li>
		<a href="#">简介</a>
		<ul>
			<li><a href="#">创建时间</a></li>
			<li><a href="#">上市时间</a></li>
			<li><a href="#">风投时间</a></li>
		</ul>
	</li>
	<li>
		<a href="#">应聘</a>
		<ul>
			<li><a href="#">技术岗</a></li>
			<li><a href="#">管理岗</a></li>
			<li><a href="#">人资岗</a></li>
		</ul>
	</li>
	<li>
		<a href="#">产品</a>
		<ul>
			<li><a href="#">产品名称</a></li>
			<li><a href="#">产品来源</a></li>
			<li><a href="#">产品功效</a></li>
			<li><a href="#">市场效益</a></li>
		</ul>
	</li>
	<li><a href="#">关于我们</a></li>
</ul>
<script type="text/javascript">
	/*
		querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
		querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素
	*/
	var liTags = document.querySelectorAll(".nav > li");
    for (var i=0; i<liTags.length; i++){
        liTags[i].onmouseenter = function (e) {
        	/*
        	event对象
        		1、event.target返回触发事件的元素
				2、event.currentTarget返回绑定事件的元素
			*/
            var li = e.currentTarget;//获得其监听器触发了事件的哪个元素
            /*
            	元素类名的操作
				element.classList.add(class1,class2,...)元素添加、element.classList.remove(class1,class2,...)元素移除
            */
            li.classList.add("active");
            console.log(li.children[1])
        }
        liTags[i].onmouseleave = function (e) {
            var li = e.currentTarget;
            li.classList.remove("active");
        }
    }
</script>
</body>
</html>

骆小胖

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈原生JS实现二级导航（优缺点与局限性）

gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width: 80%; height: 40px; line-height: 40px; margin: auto; }
复制链接

扫一扫