<!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. 为Android内核添加新驱动

    转载地址:http://blog.chinaunix.net/uid-16759545-id-4892379.html 1. 在drives目录下添加hello目录,内含hello.c Kconfig ...

  2. 每天一道Java题[4]

    问题 怎么将字符串转换为int? 解答 此题看似简单,但经常出现在笔试等地方,由于大家习惯了用IDE,有什么还真未必能写出来.通常都是parseInt()方法进行转换,如下: Int n = Inte ...

  3. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

  4. JPA - hibernate 的各种常见用法

        近期在做的项目使用的JPA,所以在此跟大家分享一下JPA的一些常见使用方法.     JPA 是 JCP 组织发布的 Java EE 标准之一,因此任何声称符合 JPA 标准的框架都遵循同样的 ...

  5. 使用faker 生成中文测试数据

    https://github.com/fzaninotto/Faker/blob/master/src/Faker/Provider/zh_CN/Address.php 常用的类型都在里面. 下面是一 ...

  6. Spring-AOP用法总结

    前言     Spring AOP的实现方法很多,在项目开发中具体采用什么方式,需要按实际情况来选择,每一种的用法,有其一定的实用价值,所以本文将各种使用方法进行了具体实现.主要包括Advice的be ...

  7. Oracle 12C 新特性之 恢复表

    RMAN的表级和表分区级恢复应用场景:1.You need to recover a very small number of tables to a particular point in time ...

  8. textView布局的一点体会

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  9. java基础阅读卷1整理(待更新)

    JAVA语言的一些简单摘要,分为11点 1.简单性2.面相对象3.网络技能(Network-Savvy)4.健壮性5.安全性 6.体系结构中立7.可移植性8.解释型9.高性能10.多线程11.多态性 ...

  10. kafka 0.8.2 消息生产者 producer

    package com.hashleaf.kafka; import java.util.Properties; import kafka.javaapi.producer.Producer; imp ...