<!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. 深入学习webpack（一）

    深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...

  2. dubbo高级配置学习

    启动时检查 可以通过check="false"关闭检查,比如,测试时,有些服务不关心,或者出现了循环依赖,必须有一方先启动. 关闭某个服务的启动时检查:(没有提供者时报错) < ...

  3. 浏览器播放rtsp流媒体解决方案

    老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧.    说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...

  4. 学生成绩管理C语言版

    [标题]学生成绩管理的设计与实现 [开发语言]C语言 [概要设计]使用结构体存储学生的学号.姓名和成绩信息,实现对学生成绩类的基本操作:增加.删除.查询.排序 [测试数据]按提示输入5组正确的正确的数 ...

  5. 透过 Delphi 使用二进位金钥做 AES 加密.

    从 1994 年开始,笔者就开始接触加密与网路安全的世界,从鲁立忠老师的指导当中获益良多,后来在台湾的元智大学就读研究所的时候,也以此为研究主题. 在当时,电子商务是显学,Visa跟 Master C ...

  6. 如何自学成为一个WEB前端

    WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂 ...

  7. Js判断是否是直接进入本页面的

    今天带来一个Js的小示例,用来判断当前页面的链接来路.很多人应该可以用到,这个虽然非常简单,但是用到的地方却还是挺多的 首先新建一个index.html,代码如下 <!DOCTYPE html& ...

  8. cas4.2.7实现单点登录

    准备前参考: cas server下载地址 cas client 下载地址 安全cookie setSecure详解 Spring通过构造方法注入的四种方式 cas 学习博文 自定义登录页和登录认证 ...

  9. MySQL数据库安全策略

    1. 删除所有MySQL中的用户(包括root用户): mysql> delete from mysql.user root可以保留,然后修改为其他用户 2. 为管理员root用户设置密码 : ...

  10. Tips_of_JS 之 利用JS实现水仙花数的寻找与实现斐波那契数列

    一.水仙花数 1.啥是水仙花数? 水仙花数是指一个 n 位正整数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3+ 3^3 = 153) 2.利用JS实现对水 ...