<!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写的简单的下拉菜单的更多相关文章

  1. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  2. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  3. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  5. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  6. js原生实现三级联动下拉菜单

    js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  7. html简单实现下拉菜单

    主要用到的知识ul和li标签 ul li 是一个组合:是无序列表标签,在实际中用的非常多,与之对应的是有序列表:ol lili是不能单独使用,必须在于ul之中的ul是块级元素,能直接定义宽高,而li是 ...

  8. jquery实现最简单的下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

随机推荐

  1. Android 属性property_get/property_set

    每个属性都有一个名称和值,他们都是字符串格式.属性被大量使用在Android系统中,用来记录系统设置或进程之间的信息交换.属性是在整个系统中全局可见的.每个进程可以get/set属性. 在系统初始化时 ...

  2. Excel 相当名称，值相加

    药品名称相同,数量汇总 原始表格,同一个名称,存在不同的单位,所以合并处理成一列 将列表复制一份出去,并删除A表重复数据 求和公式=SUMIF(A2:A16,E2:E8,B2:B16) 最后再将药品名 ...

  3. accept 和 content-Type区别

    accept表示 客服端(浏览器)支持的类型,也是希望服务器响应发送回来的的数据类型. 例如:Accept:text/xml; ,也就是希望服务器响应发送回来的是xml文本格式的内容 区别: 1.Ac ...

  4. Python的dict字典结构操作方法学习笔记

    Python的dict字典结构操作方法学习笔记 这篇文章主要介绍了Python的dict字典结构操作方法学习笔记本,字典的操作是Python入门学习中的基础知识,需要的朋友可以参考下 一.字典的基本方 ...

  5. Oracle的ole db连接字符串

    Provider=msdaora;Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=10.10.59.22)(PO ...

  6. dataTable.NET的search box每輸入一個字母進行一次檢索的問題

    當使用dataTable.NET時,可以通到簡單的setting來添加一個search box進行全表格的檢索. $('#test-listing') .on('order.dt', function ...

  7. 【Tools】UltraISO官网最新板+注册码

    官网最新UltraISO 9.7版本安装文件,非注册机,亲测可用,若注册码失效,评论会删除. 土豪赏逼地址: https://download.csdn.net/download/qq_1818716 ...

  8. consul删除无效实例

    consul删除无效实例删除无效服务删除无效节点删除无效服务http://127.0.0.1:8500/v1/agent/service/deregister/test-9c14fa595ddfb8f ...

  9. python常用的字符串格式化有哪几种?

    常用字符串格式化%和format 皇城PK Python中格式化字符串目前有两种阵营:%和format,我们应该选择哪种呢? 自从Python2.6引入了format这个格式化字符串的方法之后,我认为 ...

  10. 【转】Fuel 9.0安装Openstack网络验证失败解决

    原文链接:https://blog.csdn.net/wiborgite/article/details/52983575 故障现象: 网络验证失败,报错信息如下: Repo availability ...