zoukankan html css js c++ java

[原创]HTML 用div模拟select下拉框

<!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>

查看全文

相关阅读:
random模块学习笔记
 python3 控制结构知识及范例
 eclipse运行python 安装pydev 版本匹配问题
 接口自动化CSV文件生成超长随机字符串--java接口方法
 lucene 3.0 + 盘古分词 + 关键字高亮 + 分页的实现与demo
Loading a Different jQuery Version for IE6-8
选择排序和冒泡排序
 Bootstrap Tabs with AJAX snippet
jquery.qrcode.js
validator.w3.org for html5

原文地址：https://www.cnblogs.com/yzryc/p/6963847.html