用js写的简单的下拉菜单
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px }
#xianshi{
width:130px;
height:30px;
border:1px solid #666;
margin-left:400px;
text-align:center;
vertical-align:middle;
line-height:30px;
position:relative;
z-index:999;}
#xianshi:hover{cursor:pointer}
.xiang{ width:130px;
height:30px;
border:1px solid #666;
text-align:center;
margin-left:400px;
line-height:30px;
vertical-align:middle;
z-index:998;
position:relative;}
.xiang:hover{cursor:pointer;
background-color:#93F}
</style>
</head>
<body>
<div style="width:100%; height:30px; background-color:#F00;margin-top:50px;"></div>
<div style="width:100%; height:30px;">
<div id="xianshi" onclick="xian()">111111111</div>
<div class="xiang" style=" display:none" onclick="huan(this)">111111111</div>
<div class="xiang" style=" display:none" onclick="huan(this)">222222222</div>
<div class="xiang" style=" display:none" onclick="huan(this)">333333333</div>
<div class="xiang" style=" display:none" onclick="huan(this)">444444444</div>
<div class="xiang" style=" display:none" onclick="huan(this)">555555555</div>
<div class="xiang" style=" display:none" onclick="huan(this)">666666666</div>
<div class="xiang" style=" display:none" onclick="huan(this)">777777777</div>
</div>
<div style="width:100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div>
</body>
<script type="text/javascript">
function xian()
{
var s = document.getElementsByClassName("xiang")
var a = document.getElementById("xianshi")
var nr = a.innerHTML
for(i=0;i<s.length;i++)
{
if(s[i].style.display == "none")
{
s[i].style.display = "block"
if(s[i].innerHTML == nr)
{
s[i].style.display = "none"
} }
else
{
s[i].style.display = "none"
}
}
} function huan(a)
{
var nr = a.innerHTML
document.getElementById("xianshi").innerHTML = nr
var s = document.getElementsByClassName("xiang")
for(i=0;i<s.length;i++)
{
s[i].style.display = "none"
}
}
</script>
</html>
效果如下:
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px }
#xianshi{
width:130px;
height:30px;
border:1px solid #666;
margin-left:400px;
text-align:center;
vertical-align:middle;
line-height:30px;
position:relative;
z-index:999;}
#xianshi:hover{cursor:pointer}
.xiang{ width:130px;
height:30px;
border:1px solid #666;
text-align:center;
margin-left:400px;
line-height:30px;
vertical-align:middle;
z-index:998;
position:relative;}
.xiang:hover{cursor:pointer;
background-color:#93F}
</style>
</head>
<body>
<div style="width:100%; height:30px; background-color:#F00;margin-top:50px;"></div>
<div style="width:100%; height:30px;">
<div id="xianshi" onclick="xian()"><img src="1.jpg" height="30px" width="130px" /></div>
<div class="xiang" style=" display:none">222222222</div>
<div class="xiang" style=" display:none">333333333</div>
<div class="xiang" style=" display:none">444444444</div>
<div class="xiang" style=" display:none">555555555</div>
<div class="xiang" style=" display:none">666666666</div>
<div class="xiang" style=" display:none">777777777</div>
</div>
<div style="width:100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div>
</body>
<script type="text/javascript"> function xian()
{
var s = document.getElementsByClassName("xiang");
var a = document.getElementById("xianshi");
var nr = a.innerHTML; for(i=0;i<s.length;i++)
{
if(s[i].style.display == "none")
{
s[i].style.display = "block";
document.getElementById("xianshi").innerHTML = '<img src="3.jpg" height="30px" width="130px" />';
}
else
{
s[i].style.display = "none";
document.getElementById("xianshi").innerHTML = '<img src="1.jpg" height="30px" width="130px" />';
}
}
}
</script>
</html>
用js写的简单的下拉菜单的更多相关文章
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- js原生实现三级联动下拉菜单
js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- html简单实现下拉菜单
主要用到的知识ul和li标签 ul li 是一个组合:是无序列表标签,在实际中用的非常多,与之对应的是有序列表:ol lili是不能单独使用,必须在于ul之中的ul是块级元素,能直接定义宽高,而li是 ...
- jquery实现最简单的下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js 点击按钮显示下拉菜单
<li> <a id = "rank" onclick="showGroup()"></a></li><l ...
随机推荐
- git切换分支冲突解决-删除分支
在项目开发中,有多个版本分支需要不时的来回切换,在切换的过程中,产生了很多冲突,提交的时候 也提交不了.总结下在解决这个过程中使用的两种方法: 1.删除项目在磁盘的目录,包括 git 文件,重新 cl ...
- Sword 第三方库介绍一
/* 获取字符编码 */ #include <stdio.h> #include <stdlib.h> /* calloc()函数头文件 */ #include <str ...
- Sublime用正则表达式进行逗号分隔实现列的替换
eg: ([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*).* 这是取前面10列,后面的不管 ...
- LayaIDE 报typescript编译版本不一致的错
LayaIDE 报typescript编译版本不一致的错 文件 -> 首选项->用户设置那里修改下 settings.json // 将设置放入此文件中以覆盖默认设置 { "ty ...
- 零起点Python大数据与量化交易
零起点Python大数据与量化交易 第1章 从故事开始学量化 1 1.1 亿万富翁的“神奇公式” 2 1.1.1 案例1-1:亿万富翁的“神奇公式” 2 1.1.2 案例分析:Python图表 5 1 ...
- 如何优化代码和RAM大小
如果供应商为我自己的项目提供了一个起点,那就太好了.工作'眨眼'始终是一个伟大的首发.方便总是有代价,而且“眨眼”就是夸大“切换GPIO引脚”的代码大小.对于具有少量RAM和FLASH的设备,这可能会 ...
- Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)
对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...
- [LeetCode] 144. Binary Tree Preorder Traversal 二叉树的先序遍历
Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...
- idea的groovy设置
idea的groovy设置 groovy使用的是java的jdk 新建groovy项目,第一次新建的时候,Groovy library是空的,需要点击右边的Create...新建. 但是由于brew ...
- 常用gem
rails_db better_errors awesome_print web-console irbtools binding_of_caller awesome_rails_console