<!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. 汽车车牌JS正则表达式验证(含新能源车牌)

    /** * 第一:普通汽车 * 车牌号格式:汉字 + A-Z + 5位A-Z或0-9( 车牌号不存在字母I和O防止和1.0混淆) * (只包括了普通车牌号,教练车,警等车牌号 .部分部队车,新能源不包 ...

  2. RecyclerView添加条目点击事件setOnItemClickListener，不是在Adapter中设置；

    RecyclerView不像ListView,可以直接写setOnItemClickListener,我们大部分都是在Adapter中的设置点击事件,这个是使用RecyclerView的addOnIt ...

  3. Build path specifies execution environment J2SE-1.5. There are no JREs installed in the workspace that are strictly compatible with this environment.

    错误信息: Description Resource Path Location TypeBuild path specifies execution environment J2SE-1.5. Th ...

  4. 如何通过权限控制EXP导出指定的表

    今天一客户朋友咨询一个Oracle数据库用户EXP权限控制的问题,问我有没有办法可以解决.问题是这样的: 目前他们那边有外面的开发公司人员在核心系统做开发,考虑到系统数据的敏感性,给他们建了一个数据库 ...

  5. python学习之----BeautifulSoup示例二

    网络爬虫可以通过class 属性的值,轻松地区分出两种不同的标签.例如,它们可以用 BeautifulSoup 抓取网页上所有的红色文字,而绿色文字一个都不抓.因为CSS 通过属性准 确地呈现网站的样 ...

  6. qt之菜单栏的创建

    很久之前学习的Qt菜单栏的消息响应,昨天发现忘记了,今天又拿起来了,记一下笔记: 就像平常我们常用的软件一样,每个程序基本都有菜单栏,在菜单栏中有很多功能性的按钮,点击这些按钮会弹出有对应的菜单功能, ...

  7. UiAutomator 代码记录： 随机创建新联系人

    package lecturer; import java.lang.*; import java.nio.Buffer; import java.util.Random; import java.i ...

  8. [Unity插件]Lua行为树(七)：行为树嵌套

    在上一篇的基础上,可以测试下行为树的嵌套,所谓的行为树嵌套,就是在一棵行为树下的某一个分支,接入另一棵行为树. 以下面这棵行为树为例: TestBehaviorTree2.lua TestBehavi ...

  9. 浮动ip原理及简单实现

    原理:https://blog.csdn.net/readiay/article/details/53538085 简单实现:https://www.cnblogs.com/victorwu/p/70 ...

  10. web.xml配置重理解

    <context-param> <param-name>home-page</param-name> <param-value>home.jsp< ...