<!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. SUSE 11下安装DPDK

    SUSE下安装与centos下安装有稍许不同: # cd  dpdk-1.8.0 # grep -rn Werror . |grep -iE "Makefile|mk" |awk ...

  2. 使用DBCP连接池对连接进行管理

    //需要引用的jar包有4个,分别是commons-pool2-2.4.2.jar.commons-dbcp2-2.1.1.jar.mysql-connector-java-5.1.42-bin.ja ...

  3. MyBatis起步

    作用:封装了JDBC操作,简化数据库访问代码.封装的功能:1.获取连接,执行SQL,释放连接2.SQL参数设置(可以直接传入对象,Mybtis会将对象的属性传入SQL语句) #{属性值}取代JDBC的 ...

  4. Java基础知识二次学习--第四章 异常

    第四章 异常处理   时间:2017年4月26日11:16:39~2017年4月26日11:28:58 章节:04章_01节 04章_02节 视频长度:20:46+01:16 内容:异常的概念 心得: ...

  5. Bootstrap快速入门

    Bootstrap有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的:一个是常用结构的熟悉,做到需要的组件马上就能找到,小修修改改可用就行.其最帅的一点就 ...

  6. 开篇有益-解析微软微服务架构eShopOnContainers（一）

    为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台(几乎涵盖了所有平台,windows.mac.linux ...

  7. EIGRP负载均衡、手工汇总、泄露明细、安全认证

    基于6.6.6.6/24访问13.1.1.1/24进行负载均衡实例图 一.等价负载均衡 等价负载均衡前,R5路由器背后的6.6.6.6/24访问R1的13.1.1.1/24, 从15.1.1.0/24 ...

  8. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  9. 移动端车牌识别——可以嵌入智能手机系统里的新OCR识别技术

    移动端车牌识别技术,是在OCR光学字符识别技术的基础上研发的用来识别汽车号牌特征信息的图像识别技术.在国内,该项技术由北京易泊时代携手清华大学成功地将"国家863计划"项目成果-- ...

  10. 写markdown博客如何截图并快速上传到图床——记一个工具插件的实现

    1. 背景 写博客有一个自己的图床是不错的选择,如果不借助工具,在markdown博客中添加图片的步骤如下: 截取图片,保存到本地(得来回点对话框,选择保存路径,选择文件类型,输入文件名). 上传到图 ...