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

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>

<SCRIPT type="text/javascript"  src="./jquery.js"></SCRIPT>

<STYLE>

* {

    PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px

}

BODY {

    FONT-SIZE: 12px; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px

}

.theSelected B {

    OVERFLOW: hidden; BACKGROUND-IMAGE: url(http://static.nipic.com/img/searchNav_on_span.png); BACKGROUND-REPEAT: no-repeat

}

.theSelected {

    CURSOR: pointer; BORDER-TOP: #9ba8b0 1px solid; HEIGHT: 20px; BORDER-RIGHT: #9ba8b0 1px solid; BORDER-BOTTOM: #9ba8b0 1px solid; FLOAT: left; BORDER-LEFT: #9ba8b0 1px solid; LINE-HEIGHT: 20px; WIDTH: 79px

}

.theSelected SPAN {

    HEIGHT: 20px; FLOAT: left; COLOR: #000; PADDING-LEFT: 9px; WIDTH: 58px

}

.theSelected B {

    HEIGHT: 5px; BACKGROUND-POSITION: -120px -100px; FLOAT: left; MARGIN-TOP: 8px; WIDTH: 7px

}

.theSelected .toClose {

    BACKGROUND-POSITION: -120px -106px

}

.sortBtnDesc {

    OVERFLOW: hidden; BACKGROUND-IMAGE: url(http://static.nipic.com/img/searchNav_on_span.png); BACKGROUND-REPEAT: no-repeat

}

.sortBtnDesc {

    CURSOR: pointer; BORDER-TOP: #9ba8b0 1px solid; HEIGHT: 20px; BORDER-RIGHT: #9ba8b0 1px solid; BORDER-BOTTOM: #9ba8b0 1px solid; BACKGROUND-POSITION: -187px -99px; FLOAT: left; BORDER-LEFT: #9ba8b0 1px; WIDTH: 22px

}

.falseSelect {

    HEIGHT: 22px; FONT-FAMILY: simsun; BACKGROUND: url(http://static.nipic.com/img/falseSelect.png) repeat-x 0px 0px; POSITION: relative; FLOAT: left; MARGIN: 5px 9px 0px 0px; Z-INDEX: 51; WIDTH: 104px

}

.falseOption {

    BORDER-TOP: #a5b1b8 1px; HEIGHT: 144px; BORDER-RIGHT: #a5b1b8 1px solid; BORDER-BOTTOM: #a5b1b8 1px solid; POSITION: absolute; LEFT: 0px; BORDER-LEFT: #a5b1b8 1px solid; Z-INDEX: 51; DISPLAY: none; TOP: 22px; WIDTH: 79px; BACKGROUND-COLOR: #fff

}

.falseOption A {

    HEIGHT: 24px; COLOR: #333; PADDING-LEFT: 9px; TEXT-DECORATION: none; DISPLAY: block; LINE-HEIGHT: 24px

}

.falseOption A:hover {

    COLOR: #fff; BACKGROUND-COLOR: #1f3d99

}

</STYLE>

</HEAD>

<BODY>

<div style="padding-left:100px">

<DIV id=picRatio class=falseSelect>

    <DIV class=theSelected><SPAN>分辨率</SPAN><B class=ico></B></DIV><SPAN

    title=分辨率由高到低 class=sortBtnDesc></SPAN>

    <DIV class=falseOption>

    <A id=300r href="">&gt;=300</A>

    <A id=180r  href="">&gt;=180</A>

    <A id=96r href="">&gt;=96</A>

    <A id=72r     href="">&gt;=72</A>

    <A id=72_300r     href="">72-300</A>

    <A id=nor     href="">不限</A>

    </DIV>

</DIV>

</div>

<script>

function theFalseSelect(){ 

$(".theSelected").hover(function(){

$(this).siblings(".falseOption").show();

},

function(){

$(this).siblings(".falseOption").hide();

});

$(".falseOption").hover(function(){

$(this).show();

},function(){

$(this).hide();

});

$(".falseOption a").bind("click",function(){

$(this).closest(".falseOption").siblings(".theSelected").find("span").html($(this).html());

$(this).closest(".falseOption").hide();})

}

theFalseSelect();

</script>

</BODY></HTML>

[原创]HTML 用div模拟select下拉框的更多相关文章

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

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

  2. 用div，ul，input模拟select下拉框

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

  3. div模拟的下拉框特效

    随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...

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

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

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

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

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

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

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

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

  8. div+css模拟select下拉框

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

  9. 模拟select下拉框、复选框效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. PROC UNIVARIATE 简单示例

    OPTIONS NOCENTER LS=MAX PS=MAX USER=SASHELP; PROC UNIVARIATE DATA=FISH;WHERE SPECIES='Bream';VAR HEI ...

  2. svn 红叉叉图标解决方法

    这个图标表示当前文件夹下的某些文件或文件夹已经被计划从版本控制中 删除,或是该文件夹下某个受控的文件丢失了. 解决方法: 鼠标右键红叉小图标->->revert 更多SVN图标说明,请参考 ...

  3. jQuery动态创建DOM节点

    var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...

  4. 用dlopen，dlsym加载动态链接库.so中函数

    代码如下 static void *findSymbol(const char *path, const char *symbol) { void *handle = dlopen(path, RTL ...

  5. KafkaAPI实战

    新旧API使用 Flume和Kafka集成: Kafka有两套API: 过时的API 和新API 准备工作 <dependencies> <dependency> <gr ...

  6. ob系列函数中常用函数

    ob_start();                //打开一个输出缓冲区,所有的输出信息不再直接发送到浏览器,而是保存在输出缓冲区里面. ob_clean();               //删 ...

  7. redis管道技术

    1.redis管道pipeline解决的问题: 由于redis通信是通过tcp协议基础,并且是堵塞的处理方式,在第一个请求没有执行并返回前,无法处理第二个请求.所以事件浪费在了网络传输和堵塞请求中. ...

  8. uWSGI, Gunicorn, 啥玩意儿?

    因为nginx等优秀的开源项目,有不少本来不是做服务器的同学也可以写很多服务器端的程序了.但是在聊天中会发现,大家虽然写了不少代码,但是对wsgi是什么,gunicorn是什么,反向代理又是什么并不了 ...

  9. java使用zxing插件绘制二维码

    ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码. 涉及到的依赖有: < ...

  10. 图解RabbitMQ

    花点时间重新把rabbitMQ的整体流程粗略的梳理了一遍,便于理解.总体来说,消息产生者->queue->消息消费者可以图解如下: 文字解说:消息产生者 producter 和 consu ...