【前言】
本文简单说下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>
.
相关推荐
这个“懒人原生可控制二级导航菜单nav方向代码”提供了一种解决方案，它允许用户通过编程方式控制二级导航菜单的显示方向。下面我们将深入探讨这个主题，了解相关的关键知识点。 1. **导航菜单（Navigation Menu）*...
在网页设计中，左侧导航栏和右侧内容页的布局是一种常见的网页结构，广泛应用于各种网站，如企业官网、博客、论坛等。这种布局能够清晰地将网站的主要功能和具体内容划分开来，提供良好的用户体验。本篇文章将深入...
本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有两个`<select>`元素，分别代表一级菜单（chose1）和二级菜单（chose2）。一级菜单的`onchange`事件被...
本项目“原生js实现无限目录树”提供了一种解决方案，它涵盖了两种实现方式：一次性加载所有数据和异步加载下级数据。下面我们将深入探讨这两种实现方式以及它们在实际应用中的价值。 首先，一次性加载所有数据的...
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。...本人热爱使用原生js实现各种好看的前端页面，从而提高自己的前端开发水平。原生js实现精美放羊动画效果。
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
原生js实现jquery $.extend方法 通过遍历对象属性来实现
Cordova 环境部署和优缺点分析 Cordova 是一个基于标准 Web 技术（HTML、JavaScript 和 CSS）的混合型框架，能够将 Web 应用程序转换为原生应用程序，支持多平台开发。下面是对 Cordova 环境部署和优缺点的分析。 ...
本篇文章将详细介绍如何使用 JavaScript 实现二级菜单的联动效果。 首先，我们需要在 HTML 中设置基础的结构。二级菜单通常由一个主菜单（一级菜单）和一组子菜单（二级菜单）组成。以下是一个简单的 HTML 结构示例...
本文介绍了浅谈原生JS实现jQuery的animate()动画示例，希望此文章对各位有所帮助。 参数介绍： obj 执行动画的元素 css JSON数值对，形式为“{属性名: 属性值}”，指要执行动画的书序及其对应值 ...
本篇博客主要探讨如何利用这两者实现二级联动选择，即当用户在一级选择中作出选择时，二级选择会自动更新，以及如何解析XML和JSON数据格式。下面我们将详细探讨这些知识点。 首先，原生AJAX是通过JavaScript直接与...
本篇将详细介绍如何使用原生JavaScript实现新浪游戏频道导航条的下拉二级菜单列表。 首先，我们需要理解HTML结构。一个基本的导航条通常包含多个`<li>`元素，这些元素代表一级菜单项。每个`<li>`可能包含一个`<a>`...
【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里，开发者可以利用HTML和CSS构建游戏界面，然后用JavaScript来处理游戏逻辑和交互。这篇...
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带...
在本项目中，我们将探讨如何使用原生JavaScript（JS）实现经典的“贪吃蛇”游戏。这个项目将涉及JavaScript的基础语法、DOM操作、事件监听、定时器应用以及基本的算法设计。下面，我们将深入讲解这些关键知识点。 1...
这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和...
原生JS实现拖拽排序可以避免引入额外的库，从而提高页面性能和减少依赖。以下是一个详细的知识点说明，涵盖了如何用原生JS实现拖拽排序的关键步骤。 1. **事件监听**： - 首先，我们需要为可拖动元素添加`...
在本项目中，“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例，主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏，目标是在棋盘...