<!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. GPIO控制LED

    一.LED灯的亮灭控制的配置步骤(GPIO4_D3): 1.GPIO4的CRU_CLKGATE_CON31时钟使能配置(用来保证GPIO4可写): io -4 0xff76037c 0xffff019 ...

  2. Arduino UNO +ESP8266采集数据上传到贝壳网

    集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...

  3. 最常用的缓存技术---redis入门

      Redis简介 Redis是基于内存,也可以基于磁盘持久化nosql数据库,使用c语言开发. 数据存储结构:key-value 安装环境准备 Redis使用c语言开发,需要使用gcc编译程序进行编 ...

  4. SQL Server on Ubuntu——Ubuntu上的SQL Server（全截图）

    本文从零开始一步一步介绍如何在Ubuntu上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一．   创建Ubuntu系统(Create U ...

  5. NancyFx 2.0的开源框架的使用-CustomModule(自定义模块)

    NancyFx框架的自定义模块 新建一个空的Web项目 然后通过NuGet库安装下面的包 Nancy Nancy.Hosting.Aspnet 然后添加Models,Module,Views三个文件夹 ...

  6. 深入理解Struts2----数据校验

    在表现层的数据处理方面主要分为两种类型,一种是类型转换,这点我们上篇已经简单介绍过,另外一种则是我们本篇文章将要介绍的:数据校验.对于我们的web应用,我们经常需要和用户进行交互收集用户信息,那么无论 ...

  7. wget-文件下载工具

    阅读目录:详解wget命令-文件下载工具 安装wget 命令格式 命令功能 参数指南 启动参数 记录和输入文件参数 下载参数 目录参数 http选项参数 ftp选项参数 递归下载参数 递归下载中的包含 ...

  8. VR市场爆炸-VR全景智慧城市

    随着VR的火爆,越来越多的企业开始关注这种高新技术,也有越来越多VR虚拟现实公司应运而生,但是VR虚拟现实公司真的那么好做吗?虽然VR虚拟现实拥有巨大的市场潜力,但是同时它也非常烧钱,如果VR虚拟现实 ...

  9. js中new一个对象的过程

    使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{}: 2. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数 ...

  10. 一天搞定CSS：css选择器--07

    选择器:是指选择标签的方法 1.选择器类型 2.id选择器 代码演示 <!DOCTYPE html> <html> <head> <meta charset= ...