<!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. geoserver 常见问题笔记

    1.cql查询示例,根据点查询返回code的空间查询示例 http://192.168.0.226:8080/geoserver/lgum/ows?service=WFS&version=1. ...

  2. 第12课 std::bind和std::function（3）_std::function可调用对象包装器

    1. std::function (1)首先是一个类模板,用于包装可调用对象.可以容纳除了类成员(函数)指针之外的所有可调用对象. (2)可以将普通函数,lambda表达式和函数对象类统一起来.尽管它 ...

  3. C#对windows的IP网络测试(ping ip)

    private string CmdPing(string strIp) { Process p = new Process(); //设定程序名 p.StartInfo.FileName = &qu ...

  4. 如何跳过前端JavaScript的验证

    绕开前端的JS验证通常有以下的方法: 方法一: 将页面保存到自己机器上,然后把脚本检查的地方去掉,最后在自己机器上运行那个页面就可以了 方法二: 该方式与方法一类似一样,只是将引入js的语句删掉,或则 ...

  5. babel-polyfill

    babel-polyfill Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflec ...

  6. DNS(bind)服务器安装和配置

    一.前言 DNS 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.DNS使用TCP ...

  7. json.loads()的字符串中为单引号引发的错误

    如下错误属于弱智错误,但是错的原因让我无语,所以记录一下 str2="{'card':6217001650004184441}"print(json.loads(str2)) Tr ...

  8. slenium使用鼠标+键盘事件或者双击实现代码

    参考文章: https://www.ibm.com/developerworks/cn/java/j-lo-keyboard/

  9. sql server转oracle需要注意的几点

    1.  字符型的字段相加需要用“||”,如果用“+”的话,会报“无效的数字”的错误.   2.  Top 1 类似的脚本需要通过where rownum<=1来实现.   3.  ISNULL函 ...

  10. mysql如何修改root用户的密码

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...