<!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. spark streaming的有状态例子

    import org.apache.spark._ import org.apache.spark.streaming._ /** * Created by code-pc on 16/3/14. * ...

  2. 这些git命令判断提交到哪个分支哪个项目上

    git branch -r fuweikun@pengfei:~/e1_cp/AMSS$ git branch* 8939-E1-2104026-dev git config -l fuweikun@ ...

  3. JS面试Q&A(续）：Javascript数组排序, 默认是字符串Unicode排序， 不适合数字

    Q:下面代码段的执行后data里面的数据是什么?为什么? var data= [40,1,5,200] data.sort(); A: data的内容是[1, 200, 40, 5] 因为,Javas ...

  4. 用jQuery实现简单的简单的轮播图

    图片来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. WPF c# 定时器

    //定时查询-定时器 DispatcherTimer dispatcherTimer = new DispatcherTimer(); dispatcherTimer.Tick += (s, e) = ...

  6. java多线程的认识

    [线程定义]   定义:线程(英语:thread)是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程 ...

  7. python基础易错总结

    1.python安装配置环境变量 [右键计算机]------->[属性]------->[高级系统设置]------->[高级]------->[环境变量]--------&g ...

  8. C# Microsoft.Office.Interop.Excel.ApplicationClass 加载类型库/DLL 时出错

    问题  无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Intero ...

  9. Maven项目的生命周期

    Maven中存在三套生命周期,每一套生命周期相互独立,互不影响.在一套生命周期内,执行后面的命令前面的命令会自动执行. CleanLifeCycle:清理生命周期 mvn clean DefaultL ...

  10. 开源 人脸识别 openface 实用介绍 实例演示 训练自己的模型

    1.OpenFace 是 卡耐基梅陇(CMU)大学的一个图像+机器学习项目,整体程序包含:人脸发现,特征提取,特征神经网络训练,人脸识别这四部分. github   https://github.co ...