<!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;}

#wai1{ width:100px; height:35px; border:1px solid #666; text-align:center; vertical-align:middle; line-height:35px;}

#wai1:hover{ cursor:pointer;}

.xiang{ width:100px; height:35px; text-align:center; vertical-align:middle; line-height:35px; border:1px solid #666; border-top-width:0px; display:none;}

.xiang:hover{ cursor:pointer; background-color:#0F6}

</style>

</head>

<body>

<br />

    <div id="wai1" onclick="dianji()"></div>

    <div class="xiang" onclick="xuanzhong(this)">山东</div>

    <div class="xiang" onclick="xuanzhong(this)">淄博</div>

    <div class="xiang" onclick="xuanzhong(this)">淄川</div>

    <div class="xiang" onclick="xuanzhong(this)">张店</div>

    <div class="xiang" onclick="xuanzhong(this)">桓台</div>

</body>

</html>

<script type="text/jscript">

function dianji()

{

    var a = document.getElementsByClassName("xiang");

        for(i=0;i<a.length;i++)

        {

            a[i].style.display = "block";

        }

}

function xuanzhong(b)

{

    var c = b.innerHTML;

    document.getElementById("wai1").innerHTML = c ;

    var a = document.getElementsByClassName("xiang");

        for(i=0;i<a.length;i++)

        {

            a[i].style.display = "none";

        }

}

</script>

<!--<style type="text/css">

*{ margin:0px auto; padding:0px}

#xiala{ width:200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}

#xiala:hover{ cursor:pointer}

.list{ width:200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-width:0px; display:none}

.list:hover{ cursor:pointer; background-color:#63C; color:white;}

</style>

</head>

<body>

<br />

<div style="width:500px; height:500px;">

    <div id="xiala" onclick="showa()"></div>

    <div class="list" onclick="xuan(this)">山东</div>

    <div class="list" onclick="xuan(this)">北京</div>

    <div class="list" onclick="xuan(this)">上海</div>

    <div class="list" onclick="xuan(this)">深圳</div>

    <div class="list" onclick="xuan(this)">广州</div>

</div>

<script type="text/javascript">

function showa()

{

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "block";

    }

}

function xuan(a)

{

    var nr = a.innerHTML;

    document.getElementById("xiala").innerHTML=nr;

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "none";

    }

}

</script>

</body>

</html>-->

用div做下拉列表的更多相关文章

  1. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  2. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. 两个重叠的div做前后翻转

    当需要做一个翻转卡片式的div时候,需要两个div的大小等大例如: 画出两个等大的div后,将他们重叠 图中的两个div做了重叠,做重叠时候用的属性是 position: absolute; 并且需要 ...

  4. 怎样用div做三角形

    20181204 用盒子模型做三角形的效果: <div></div> width:0px; height:0px; border:10px solid red; border- ...

  5. [css]display: table-cell，用div做分列布局

    table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...

  6. 学习笔记之08试用div做网页（滨院）-小作业

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV做的Table

    <style> div.table{ border:1px solid #d7d7d7; margin-left:0px; border-bottom-width:; width:1200 ...

  8. XML做下拉列表

    5-18X.php主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. 用div加css做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

随机推荐

  1. java问题诊断

    http://techblog.youdao.com/?p=961 http://linuxtools-rst.readthedocs.org/zh_CN/latest/advance/03_opti ...

  2. gvim work notes.. a few days' work on 64bit vim and plugin compilations

    (a 600MB+ sized c/c++ compiler which is capable of hi-light and JB styled completion!! and of-course ...

  3. php ajax 下拉加载数据

    视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...

  4. cocos2d-x-2.2.6创建工程

    1.下载并安装Python,我的版本是2.7.3,不要太高,据说不能用.2.配置环境变量,将Python的安装的根目录加入系统环境变量的Path路径中(不赘述,自行配置)3.配置好之后打开cmd命令行 ...

  5. 利用htmlunit登陆带验证码图片的网站

    http://htsoft.org/html/y2011/822_using-htmlunit-landing-site-with-captcha-image.html 利用htmlunit登陆带验证 ...

  6. C++头文件#include<bits/stdc++.h>

    一句话的事,直截了当——#include<bits/stdc++.h>包含C++的所有头文件 参考网站(点击):http://www.tuicool.com/articles/m6neUj ...

  7. Linux SCP命令复制传输文件的用法

    SCP命令是用户通过网络将一台Linux服务器的文件复制到另一台Linux服务器,方法如下: 一:从本地复制到远程 复制文件: 命令格式: scp local_file remote_username ...

  8. UL/LI

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理    我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1&quo ...

  9. C#入门经典（3-窗体应用程序-第二章要点）

    新建一个窗体用用程序,拖一个按钮,加事件和Text属性.打开Form1Designer.cs.

  10. Hibernate用Oracle的sequence生成自增Id

    <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE hibernate-mapping PUBL ...