div模拟的下拉框特效

时间:2022-12-27 17:49:24

随笔- 4 文章- 0 评论- 0 ?

<style type="text/css">

body, ul, li

{

margin: 0;

padding: 0;

font-size: 13px;

}

ul, li

{

list-style: none;

}

#divselect

{

width: 186px;

margin: 80px auto;

position: relative;

z-index: 10000;

}

#divselect cite

{

width: 150px;

height: 24px;

line-height: 24px;

display: block;

color: #807a62;

cursor: pointer;

font-style: normal;

padding-left: 4px;

padding-right: 30px;

border: 3px solid #333333;

background: url(xjt.png) no-repeat right center;

}

#divselect ul

{

width: 184px;

border: 1px solid #333333;

background-color: #ffffff;

position: absolute;

z-index: 20000;

margin-top: -1px;

display: none;

}

#divselect ul li

{

height: 24px;

line-height: 24px;

}

#divselect ul li a

{

display: block;

height: 24px;

color: #333333;

text-decoration: none;

padding-left: 10px;

padding-right: 10px;

}

#divselect ul li a:hover

{

background-color: #CCC;

}

p

{

margin: 10px auto;

width: 920px;

}

#n

{

margin: 10px auto;

width: 920px;

border: 1px solid #CCC;

font-size: 12px;

line-height: 30px;

}

#n a

{

padding: 0 4px;

color: #333;

}

</style>

<form id="form1"action="" method="post">

<div id="divselect" class="divselect">

<cite>请选择特效分类</cite>

<ul>

<li><a href="javascript:;" selectid="1">导航菜单</a></li>

<li><a href="javascript:;" selectid="2">下拉select效果</a></li>

<li><a href="javascript:;" selectid="3">select模拟</a></li>

<li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li>

<li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li>

</ul>

</div>

<br />

<div id="divselect" class="divselect1">

<cite>请选择特效分类</cite>

<ul>

<li><a href="javascript:;" selectid="6">导航</a></li>

<li><a href="javascript:;" selectid="7">下拉</a></li>

<li><a href="javascript:;" selectid="8">模拟</a></li>

<li><a href="javascript:;" selectid="9">特效</a></li>

<li><a href="javascript:;" selectid="10">下拉特效</a></li>

</ul>

</div>

<input name="" value="" id="inputselect"/> //获取的数据

</form>

<input type="button" value="get" onclick="get()" />

$(function(){

$.divselect(".divselect", "#inputselect");

$.divselect(".divselect1", "#inputselect");

});  //定义了两个下拉框

function get() {

var dd = document.getElementById("inputselect");

alert(dd.value);

}  //弹出获取的数据

下载示例代码http://www.51xuediannao.com/js/jquery/divselect.html

div模拟的下拉框特效的更多相关文章

  1. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  2. &lbrack;原创&rsqb;HTML 用div模拟select下拉框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...

  3. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  4. 用div,ul,input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. jq插件又来了,模拟select下拉框,支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  6. ul -- li 模拟select下拉框

    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...

  7. JS Div滚动,下拉框添加属性,年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

  8. div&plus;css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

  9. 轻松使用div模拟select下拉菜单

    没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...

随机推荐

  1. matlab global 不能传向量&sol;矩阵

    matlab global 不能传向量/矩阵 只能传1个数值 而函数变量可以传向量/矩阵

  2. int 指令

    int n 也就是中断操作->根据中断类型码来查找中断向量表(中断向量表在0-3ffh这个内存空间) 调用int n 也就操作了下面的步骤 1)取中断类型码n: 2)标志寄存器入栈,IF=0,T ...

  3. JavaBean转Map方法

    Map<String, Object> fieldMap =new HashMap<String, Object>(); BeanInfo beanInfo = Introsp ...

  4. Linux操作系统进程模型分析进程

    Linux操作系统简介 Linux拥有现代操作系统的功能,如真正的抢先式多任务处理,支持多用户内存,保护虚拟内存,支持SMP.UP,符合POSIX 标准联网.图形用户接口和桌面环境具有快速性.稳定性等 ...

  5. 获取APP应用的包名信息

    语言: python 3.7 需求:获取APP的包名和程序入口信息,以便在 Appium 脚本中配置 appPackage 和 appActivity 参数. 场景一 资源:已有APP应用的apk安装 ...

  6. SQL中NVL函数

    空值判断函数 1.NVL(表达式A,表达式B) 如果表达式A为空值,NVL返回值为表达式B的值,否则返回表达式A的值.该函数的目的是把一个空值(null)转换成一个实际的值.其表达式的值可以是数字型. ...

  7. CF 1033 C&period; Permutation Game

    C. Permutation Game http://codeforces.com/contest/1033/problem/C 题意: 一个排列,每个位置i走到的位置j满足:a[j]>a[i] ...

  8. GNU 汇编 协处理器指令

    1. CP15 协处理器 16组寄存器 mcr 写 mrc (rgeister CP15)  读 CP15 到 Register mrc  p15,0,c0,c0,0

  9. classpath 和 classpath&ast;的 区别:

    classpath 和 classpath*的 区别: classpath:只会到你指定的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件中(class路径 ...

  10. hdu4737A Bit Fun 线段树

    //给一串序列,问有多少对[i,j]使得 //[i,j]区间的全部数的或的值小于m //能够知道'或'操作的加(a|b)>=max(a,b) //能够枚举区间的右边r,找左边第一个不满足的位置 ...