二级联动菜单

最新推荐文章于 2021-08-05 12:12:02 发布
最新推荐文章于 2021-08-05 12:12:02 发布
阅读量78 收藏
点赞数
分类专栏： javascript/ajax 文章标签： XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_15914/article/details/81575562
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</title>
<script type=text/javascript>
<!--
var LastLeftID = "";

function DoMenu(emid){
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)){
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
-->
</script>

<style type="text/css">
<!--
body {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size:12px;
}
#nav {
width:180px;
list-style-type: none;
text-align:left;
margin:10px 0 0 10px;
}

#nav a {
width: 180px;
display: block;
padding:5px 0 5px 20px;
}

#nav li {
background:#cccccc;
border-bottom:#ffffff 1px solid;
float:left;
}

#nav li a:hover{
background:#cc0000;
}

#nav a:link {
color:#666;
text-decoration:none;
}

#nav a:visited {
color:#666;
text-decoration:none;
}

#nav a:hover {
color:#ffffff;
text-decoration:none;
font-weight:bold;
}

#nav li ul {
list-style:none;
text-align:left;
padding:0;
}

#nav li ul li{
background: #ebebeb;
}

#nav li ul a{
padding-left:20px;
width:180px;
}

#nav li ul a:link {
color:#666;
text-decoration:none;
}
#nav li ul a:visited {
color:#666;
text-decoration:none;
}
#nav li ul a:hover {
color:#f3f3f3;
text-decoration:none;
font-weight:normal;
background:#cc0000;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#Menu=ChildMenu1" οnclick="DoMenu('ChildMenu1')">menu1</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">menu2</a>
<ul id="ChildMenu2" class="collapsed">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">menu3</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">menu4</a>
<ul id="ChildMenu4" class="collapsed">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
</ul>
</body>
</html>
iteye_15914
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现二级联动
qq_38946358的博客
06-10 1651
Android实现二级联动，二级联动是非常常见实用的功能，用的比较多的就是地址选择了，今天就给大家讲讲如何实现： 效果图: 效果图： 布局文件： [html] view plain copy        xmlns:android="http://schemas.android.com/apk/res/android"      
实现二级联动菜单
牧野枫凉的博客
09-08 883
所谓的二级联动菜单，就是要通过一个下拉列表的选择从而在另一个下拉列表中显示出对应的数据。在这里就简单的拿省份写了个简单的例子。通过选择一个省显示该省的市或者区。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>4-5</title> &lt...
Android开发丶二级列表的联动功能实现
09-07
通常我们在外卖或者商城app会看到竖排二级列表的界面，点击左边列表的分类菜单，右边列表则会显示对应分类下的列表内容，本demo提供简单的功能实现仅供参考。
二级联动菜单 超强超简单的数据库（附数据库）
08-27
二级联动菜单 超强超简单的数据库（附数据库），这个肯定是最适合你的
二级联动列表
feng的博客
11-16 612
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二级联动列表&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;style&gt; .hide{ display: none; } &lt;/style&gt; &lt;/head
JS 二级联动菜单
鸟人的博客
10-04 2263
二级联动菜单是个十分常用的前端组件，在很多网站的菜单栏上都有用到，那么它是如何实现的呢？今天，我们就基于JS代码来实现这一需求效果 思路：通过DOM树获取到第一级节点的值，根据该值从提供的数据中获取到对应的二级内容，通过创建节点，将内容放入二级菜单中（）...
html ajax实现二级联动,Ajax实现二级联动菜单
weixin_36212175的博客
08-05 302
本文实例为大家分享了Ajax二级联动菜单的具体代码，供大家参考，具体内容如下index.jsp二级菜单联动演示var req;window.οnlοad=function(){//页面加载时的函数}function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数var province = document.getElementById('province').val...
HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码
weixin_34529812的博客
06-04 1032
jQuery 1.3.2 简单实现select二级联动jQuery 二级联动$(document).ready(function(){$("#province").change(function(){$("#province option").each(function(i,o){if($(this).attr("selected")){$(".city").hide();$(".city").e...
Php mysql二级关联菜单_php实现二级联动菜单
weixin_42510783的博客
01-19 184
php实现二级联动菜单的方法：首先根据大类的值，通过jQuery把值传给后台PHP处理；然后用PHP查询MySQl数据库，得到相应的小类；最后返回JSON数据给前端处理即可。jq+php+mysql 实现二级菜单联动二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery...
java实现的二级联动菜单效果
09-01
主要介绍了java实现的二级联动菜单效果,结合实例形式分析了java前台页面布局及与后台交互构造联动菜单的相关技巧,需要的朋友可以参考下
基于Javascript实现二级联动菜单效果
10-22
主要介绍了基于Javascript实现二级联动菜单效果的相关资料,需要的朋友可以参考下
基于asp+ajax和数据库驱动的二级联动菜单
10-29
基于asp+ajax和数据库驱动的二级联动菜单,需要的朋友可以参考下。
原生js实现二级联动菜单
10-15
主要为大家详细介绍了原生js实现二级联动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
PHP+ajax实现二级联动菜单功能示例
12-19
本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考，具体如下： 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，...
多级目录联动效果实现
钟铭
07-28 1573
先给大家上个图（不知道为什么录制的第一个目录老是花的，不管了，大家能动意思就行）。     大家应该经常加过这种效果吧，下面我们就开始实现效果。    其实用的东西我们都是知道的，就是listview，那么listview怎么实现这个效果呢，主要在于适配器写好了即可。先给出主布局代码：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln
javascript制作省市联动等类似二级目录
john_snowly的博客
02-25 260
以下是参考教程中的代码，使用了双重遍历。 &lt;script&gt; //1.创建一个二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Ar...
菜单栏点击显示二级菜单_显示完整菜单
culiao2169的博客
08-20 1242
点击一级菜单显示二级菜单 显示完整菜单 (Show Full Menus)On my own computer, I like to see the full menus in Excel, so I selected that setting: 在我自己的计算机上，我想查看Excel中的完整菜单，因此我选择了该设置： On the Tools menu, click Customize 在工...
vue侧边栏二级联动菜单
最新发布
09-10
Vue侧边栏二级联动菜单的实现可以通过以下步骤来完成： 1. 首先，我们需要在Vue的组件中引入侧边栏的数据。可以通过在data属性中定义一个菜单数组来存储侧边栏的数据。例如： ``` data() { return { menuList: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值