技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
select+jquery 选择标签样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
body,ul{ margin:0; padding:0; }
.sortWrap02 { border-bottom:1px solid #c7c7c7; color:#3c465f; font:12px/22px Arial; height:22px; left:14px; margin:0 auto; padding:13px 2px 10px; position:absolute; top:0; text-align:left; width:590px; }
.sortWrap02 span { float:left; font:12px/22px Arial; height:22px; width:60px; }
.sortWrap02 span.sortTips02 { padding:0 0 0 8px; width:90px; }
.sortListWrap02 { cursor:pointer; position:relative; width:180px; margin:0 auto;}
.sortCurr02 { background:url(http://files-ns.perfectworld.com/common/portal/www/images/ico-arrow07.png) no-repeat 100% 0; border:1px solid #a4a4a4; height:20px; line-height:20px; padding:0 20px 0 8px; overflow:hidden; white-space:nowrap; width:150px; }
.sortList02 { background:#f7f7f7; display:none; left:0; overflow:hidden; padding:1px 0 0; position:absolute; top:21px; width:180px; z-index:999; }
.sortList02 li { border-bottom:1px solid #a4a4a4; border-left:1px solid #a4a4a4; border-right:1px solid #a4a4a4; float:left; height:20px; line-height:20px; margin:-1px 0 0; overflow:hidden; padding:1px 20px 0px 8px; position:relative; white-space:nowrap; width:150px; }
.sortList02 .first { border-top:1px solid #a4a4a4; padding:0 20px 0px 8px; }
.sortList02 .last { }
.sortList02 .hover { background:#f2fad4; border:1px solid #8cbb55; padding:0 20px 0 8px; }
</style>
<script src="http://files-ns.perfectworld.com/common/portal/www/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(function(){
var sortIndex = '1'; var arrData = {'All':'all','Perfect World':'1','Jade Dynasty':'3','Ether Saga Online':'2','Torchlight':'5','Battle of the Immortals':'6','Forsaken World':'7','Heroes of Three Kingdoms':'8'};
//sort list
$("#sortListWrap02")
.click(function(){
$("#sortList02").toggle();//.toggle();
return false;
});
$("#sortList02 li").hover(
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");})
.click(function(){
var url = $('#sortUrl').val();
var strTemp = $(this).text();
$(this).text($("#sortCurr02").text());
$("#sortCurr02").text(strTemp);
window.location.href = url+arrData[strTemp]+sortIndex;
});
$("#word_display a").click(function(){
$(this).parent().find("span").toggle();
})
/* function sortInit(str) {
var j = 0;
$.each(arrData, function(i, n){
if(n != str){
$("#sortList02 li:eq("+j+")").text(i);
j++;
} else {
$("#sortCurr02").text(i);
}
});
}//arrData数据*/
})
</script>
<body>
<div id="sortListWrap02" class="sortListWrap02">
<div id="sortCurr02" class="sortCurr02">Perfect World</div>
<input type="hidden" value="/media/gamevideos/?category=" id="sortUrl">
<ul id="sortList02" class="sortList02" style="display: none;">
<li class="first">All</li>
<li class="first">Jade Dynasty</li>
<li class="first">Ether Saga Online</li>
<li class="first">Torchlight</li>
<li class="first">Battle of the Immortals</li>
<li class="first">Forsaken World</li>
<li class="first">Heroes of Three Kingdoms</li>
</ul>
</div>
<div id="word_display">The article say that our country need stronger thant others;<a href="javascript:;">more</a><span style="display:none;">I want to test it dislay effects only!</span></div>
</body>
</html>