简单实现二级竖菜单的功能：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function a(div) {
var divs = document.getElementsByTagName("div");//得到所有的div
for ( var i = 0; i < divs.length; i++) {
if (divs[i].id == div) {
if (divs[i + 1].style.display == "block") {
divs[i + 1].style.display = "none";
} else {
divs[i + 1].style.display = "block";
}
}
}
}
</script>
</head>
<body>
<div id="a" onclick="a(this.id)" style="cursor: hand">首页</div>
<div id="aa" style="display: none">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
</div>
<div id="b" onclick="a(this.id)" style="cursor: hand">首页</div>
<div id="bb" style="display: block">
<div id="b1">1</div>
<div id="b2">2</div>
<div id="b3">3</div>
<div id="b4">4</div>
</div>
</body>
</html>
注：从cnblogs搬家的
分享到：
相关推荐
本文将详细解析一个基于CSS和`<div>`标签实现的菜单导航栏的具体实现方式及其各个部分的功能。 #### 二、代码结构分析 ##### HTML结构 ```html <div id="navcontainer"> <li><a href=...
在创建二级菜单时，通常会用到多个div来组织菜单结构，例如一个div作为主菜单容器，每个菜单项则由另一个div包裹，二级菜单则隐藏在一级菜单项下，通过CSS的`display`属性控制其可见性。 为了实现红色大气的视觉...
### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前，我们需要定义页面的基本结构。通过HTML代码，我们可以创建一个带有子菜单的父级菜单项。在这个例子中，我们使用了一个`...
6. **定位**：为了使二级菜单在一级菜单下方正确显示，我们需要使用CSS的定位属性，如`position`（静态、相对、绝对、固定）、`top`、`bottom`、`left`、`right`。通过相对定位，二级菜单可以相对于其父元素进行调整...
例如，二级菜单可能需要相对于其父元素进行绝对定位，而三级菜单则需要相对于二级菜单定位。 4. **响应式设计**：考虑不同屏幕尺寸下的显示效果，可能需要使用媒体查询（`@media`）来调整菜单在小屏幕设备上的布局...
综上所述，"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点，开发者能够创建出既美观又功能完善的无脚本...
本篇文章将详细讲解如何使用`div`模拟`select`框，以及如何实现省市联动的二级和三级菜单。 首先，我们要理解`select`元素的基本用法。`select`是HTML中的一个表单元素，用于创建下拉选项列表。然而，由于`select`...
<li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> 一级菜单2 <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> ``` 这里，每个一级菜单项包含一...
这个“div折叠菜单”实例主要针对二级菜单，这意味着它包含一个主菜单，当用户点击主菜单项时，会展开或收起对应的子菜单。这种设计在节省空间的同时，提供了清晰的层次感，使网站界面更加整洁。 首先，我们来详细...
"二级菜单特效"通常指的是通过JavaScript、HTML（div）和CSS技术实现的动态交互效果，使用户在鼠标悬停或点击一级菜单时，二级菜单能够平滑地展现出来。这些特效可以增加网站的视觉吸引力，同时提升用户的操作便捷性...
总结一下，"JS飞符合web标准DIV二级下拉菜单"项目是利用JavaScript和CSS+DIV技术实现的符合Web标准的多级下拉菜单。JavaScript处理交互逻辑，CSS负责样式和布局，而DIV元素则提供了良好的结构基础。通过学习和应用这...
在这个名为“div css圆角二级菜单”的主题中，我们将深入探讨如何利用CSS来创建具有圆角效果的二级下拉菜单。 首先，让我们理解`div`是如何在HTML中使用的。`<div>`元素是一个通用容器，它没有特定的意义，但可以...
JavaScript是实现交互性的重要工具，在这个二级菜单中，我们需要通过监听用户的鼠标事件（如`mouseover`和`mouseout`）来控制二级菜单的显示与隐藏。我们可以创建一个函数，当鼠标悬停在一级菜单上时，显示对应的二...
防刷新二级菜单Div+CSS+JS代码,非常好用，做网站经常要用到
DIV+CSS+JS二级树型菜单，二级菜单展开后刷新无影响
二级导航菜单的展开和收缩可能通过CSS的`display`属性来控制，例如，当鼠标悬停在一级菜单上时，二级菜单的`display`属性会从`none`变为`block`，显示子菜单。 在实际应用中，这个圆形二级导航菜单可能适合用于那些...
总的来说，“动易三级导航菜单”是一个使用现代Web技术构建的交互式菜单系统，尽管目前存在二级菜单Hover效果的缺陷，但通过深入理解DIV+CSS和适当的代码调试，我们可以解决这个问题，提升用户体验。在设计和开发...
DIV CSS技术实现的鼠标悬念下拉出大面积的二级菜单，这种菜单微软、Adobe等大公司网站上目前还在使用，严格来说这不像是菜单，但却有着体验很好的导航功能，当菜单显示时，篇幅占据几乎整个窗口，面积比较大的菜单...
纯div+css制作的两级菜单
对于三级菜单，我们需要至少三层`div`结构：一级菜单、二级菜单和三级菜单。一级菜单通常显示在页面顶部，当用户鼠标悬停在一级菜单项上时，二级菜单会弹出显示；同理，当鼠标悬停在二级菜单项上，三级菜单则会弹出...