<!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. iOS NSUserDefaults

    一.介绍 NSUserDefaults适合存储请练级的本地数据,对于一些简单的数据(NSString类型)来说是首选,但是如果我们自定义了一个对象,对象保存的是一些信息,这是就不能直接存储到NSUse ...

  2. OOP学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python读写json+字典保存

    解决方案 json 模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps()和 json.loads() , 要比其他序列化函数库如pickle的接口少得多 ...

  4. boost 学习笔记 2: timer

    boost 学习笔记 2: timer copy from:http://einverne.github.io/post/2015/12/boost-learning-note-2.html 1:ti ...

  5. 【原创】重装Windows系统后Android studio无需重装，直接迁移

    每次重装Windows系统后重装各种开发环境让人苦不堪言,比如VS2013 +补丁,没有个小半天根本搞不定! 对与Android的开发者,同样安装JDK+Android Studio + Adnroi ...

  6. UiAutomatorHelper 调试类

    package rom; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...

  7. 虚拟机中安装CentOS7

    初始安装: 1.安装新虚拟机时,选择稍后安装操作系统,这可以自己设置语言等信息 2.修改自定义硬件:为网卡生成一个mac地址,(这里需要注意,有时网卡会冲突,导致连接时好时坏,以后可以删除掉网卡,重新 ...

  8. gentoo moc audacious

    最近想在 gentoo 上面听音乐, 以前用过 audacious,现在想换成 moc 试试看. emerge -av moc,结果安装完了以后,放 mp3 没有声音,把 USE 里面各种相关解码的都 ...

  9. mongodb的聚合aggregate|group|match|project|sort|limit|skip|unwind

    聚合 aggregate 聚合(aggregate)主要用于计算数据,类似sql中的sum().avg() 语法 db.集合名称.aggregate([{管道:{表达式}}]) 管道 管道在Unix和 ...

  10. python文件读取和写入案例

    python文件读取和写入案例  直接上代码吧 都是说明 百度上找了很多,最终得出思路 没有直接可以读取修改的扩展,只能先读取,然后复制一份,然后在复制出来的文件里面追加保存 然后删除读的那个,但是缺 ...