游子日月长

笑渐不闻声渐悄，多情却被无情恼！

导航

[原创]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>

 

posted on 2017-06-08 17:13  游子日月长  阅读(445)  评论(0)    收藏  举报