<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单的下拉框</title>

    <style>

        * {

            padding: ;

            margin: ;

        }

        .main {

            width: 1200px;

            height: 300px;

            margin:  auto;

        }

        h3 {

            margin-left: 20px;

            background-color: #;

        }

        .dis {

            float: left;

        }

        li {

            list-style: none;

            margin-left: 30px;

            margin-top: 10px;

        }

        ul {

            display: none;

            margin-left: 19px;

            background-color: #;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="dis">

            <h3 onmouseover="one(0)">z选项一</h3>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="dis">

            <h3 onmouseover="one(1)">z选项二</h3>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="dis">

            <h3 onmouseover="one(2)">z选项三</h3>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="dis">

            <h3 onmouseover="one(3)">z选项四</h3>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div>

    <script>

        function one(num){

            var objs = document.getElementsByTagName("ul");

            for(var i = ; i < objs.length;i ++) {

                if (i == num) {

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

                }else {

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

                }

            }

        }

    </script>

</body>

</html>

Example017简单的下拉框的更多相关文章

  1. 用CSS和jQuery制作简单的下拉框

    请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...

  2. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  3. 关于Vue+iview的简单下拉框滚动加载

    话不多说,直接上代码,作用是下拉框内容无限滚动加载: Html: <FormItem style="position:relative" label="用户名:&q ...

  4. Android Spinner 下拉框简单应用 详细注解

    目录 Android Spinner 代码部分 Spinner代码介绍 核心代码 说在最后 @ Android Spinner Spinner 提供下拉列表式的输入方式,该方法可以有效节省手机屏幕上的 ...

  5. select下拉框可以直接取list里的内容 不用非得转map (不得不承认我是个ZZ，这么简单的问题才反应过来，--^--)

    需求描述:select下拉框的填充项,从后台传来的list中获取 自黑一下:之前有篇随笔,写的是通过map传到前台,在前台的select中的value属性取值 用map的key,而select的tex ...

  6. ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug

    前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...

  7. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  8. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  9. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

随机推荐

  1. <<、>>、>>>移位操作

    <<,有符号左移位,将运算数的二进制整体左移指定位数,低位用0补齐. int leftShift = 10; System.out.println("十进制:" + l ...

  2. shell群发邮件脚本

    linux版本:CentOS  6.7        //可以使用lsb_release -a查看 一.修改/etc/mail.rc set from=123456@qq.com //你自己的真实邮箱 ...

  3. 高效工作的秘诀——Doit.im使用总结报告

    从上次购买doit.im pro账户到现在已经快一年了,从摸索到现在的熟悉,目前这款软件已经成为我工作生活中最为重要的效率工具,在此之前也用过很多软件进行时间管理,综合起来评价,doit应该算是最棒的 ...

  4. aws 装机软件

  5. （入门篇 NettyNIO开发指南）第五章-分隔符和定长解码器使用

    TCP    以流的方式进行数据传输上层的应用协议为了对消息进行区分,往往采用如下4种方式. (1)消息长度固定,累计读取到长度总和为定长LEN 的报文后,就认为读取到了一个完整的消息,将计数器置位, ...

  6. 浅析Web缓存

    在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度.其中提高网页反应速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并 ...

  7. Elasticsearch与Solr

    公司之前有个用Lucene实现的伪分布式项目,实时性很差,后期数据量逐渐增大的时候,数据同步一次需要十几小时.当时项目重构考虑到的是Solr和ES,我参与的是Solr技术的预研.因为项目实时性要求很高 ...

  8. mysql5.6创建新用户并给授权指定的数据库权限

    一.环境: CentOS 6.8 mysql 5.6 二.背景 给外包的工作人员提供我司某台服务器的 mysql 中某个数据库的访问权限. 之所以要做限制,是防止他们对我司其他的数据库非法进行操作. ...

  9. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  10. {网络编程}和{多线程}应用：基于TCP协议【实现多个客户端发送文件给一个服务器端】--练习

    要求: 实现多个客户端发送文件给一个服务器端 提示:多个人创建客户端发送文件,服务端循环接收socket,从socket中获取文件 说明:这里我们只要建立一个服务端就可以了,然后让多台电脑使用客户端给 ...