用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 ...

随机推荐

第06组 Beta冲刺（4/5）
队名:拾光组组长博客链接作业博客链接团队项目情况燃尽图(组内共享) 组长:宋奕过去两天完成了哪些任务继续维护后端代码继续学习深入python 继续研究匿名拨打电话问题.套牌多结果处理问题 ...
【软工实践】Beta冲刺（3/5）
链接部分队名:女生都队组长博客: 博客链接作业博客:博客链接小组内容恩泽(组长) 过去两天完成了哪些任务描述新增数据分析展示等功能API 服务器后端部署,API接口的beta版实现展示 ...
redis 服务器开放给其他电脑连接
1.云服务器的端口6379开通 2.宝塔服务器上的6379开通 3.修改服务器上的redis配置文件: # bind 127.0.0.1 注释掉daemonize no 改为noprotected-m ...
将linux上的网站代码托管到gogs git服务器上进行实时同步（实战）
一.说明本说明只针对php,其他语言需要编译请用别的架构实现二.实现效果本地开发员门提交推送代码到git服务器,会立即同步更新网站服务器上代码三.实战步骤小节首次托管请先看 https: ...
PostgreSQL中的一些日志
1.Write Ahead Log(WAL日志)预写日志(WAL)是保证数据完整性的标准方法.在有关交易处理的大多数(如果不是全部)书籍中都可以找到详细说明. 简而言之,WAL的核心概念是,只有在记录 ...
XCode教程之如何在苹果开发者平台添加设备UDID
XCode教程之如何在苹果开发者平台添加设备UDID.在Xcode开发中,如何在苹果开发者平台添加新的手机设备UDID,进行测试,具体如下工具/原料 Apple Developer 方法/步骤 1 ...
Shell流程控制语句for
for语法格式: for 变量 in 参数列表 do 命令 done 或者 for 变量 in 参数列表 ; do 命令 done for语句流程控制图: 实例: [root@youxi1 ~]# v ...
[LeetCode] 122. Best Time to Buy and Sell Stock II 买卖股票的最佳时间 II
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
socket支持ipv6
转自:https://www.jianshu.com/p/9926b99a7fef 以前cocos2d-x的项目里都使用的是libwebsocket,如果想支持ipv6,只需要升级相应的库即可,现在有 ...
TypeError: Cannot read property 'compilation' of undefined
Vue build失败 TypeError: Cannot read property 'compilation' of undefined 1. 使用npm run build 失败使用npm ...

用js写的简单的下拉菜单

用js写的简单的下拉菜单的更多相关文章

随机推荐

热门专题