CSS+JS实现很流行的用户列表代码
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>CSS+JS实现很流行的用户列表代码 - www.webdm.cn</title>6
<script type="text/javascript">
7
function nTabs(thisObj,Num){8
if(thisObj.className == "active")return;9
var tabObj = thisObj.parentNode.id;10
var tabList = document.getElementById(tabObj).getElementsByTagName("li");11
for(i=0; i <tabList.length; i++)12
{13
if (i == Num)14
{15
thisObj.className = "active";16
document.getElementById(tabObj+"_Content"+i).style.display = "block";17
}else{18
tabList[i].className = "normal";19
document.getElementById(tabObj+"_Content"+i).style.display = "none";20
}21
}22
}23
var show_king_id = 1;24
function show_king_list(e,k)25
{26
if(show_king_id == k) return true;27
o = document.getElementById("a"+show_king_id);28
o.className = "bg";29
e.className = " ";30
show_king_id = k;31
}32
var show_kinga_id = 1;33
function show_kinga_list(f,l)34
{35
if(show_kinga_id == l) return true;36
o = document.getElementById("b"+show_kinga_id);37
o.className = "bg";38
f.className = " ";39
show_kinga_id = l;40
}41
</script>42
<style type="text/css">43
*{}{44
margin: 0;45
padding: 0;46
}47
body {}{48
font-size:12px;49
font-family:"宋体",Arial, Helvetica, sans-serif;50
color:#666666;51
}52
.door_container {}{53
width:200px;54
}55
.door_container .TabTitle {}{56
height:36px;57
}58
.door_container .TabTitle li {}{59
list-style:none;60
float:left;61
width:77px;62
height:36px;63
cursor:pointer;64
padding-left:2px;65
line-height:28px;66
color:#7c7c7c;67
font-size:14px;68
text-align:center;69
font-weight:bold;70
}71
.door_container .TabTitle .active {}{72
color:#000;73
background:#CC9999;74
}75
.door_container .TabTitle .normal {}{76
color:#7c7c7c;77
}78
.door_container .TabContent {}{79
width:198px;80
}81
.none {}{82
display: none;83
}84
.star{}{85
width:198px;86
overflow:hidden;87
white-space:nowrap;88
text-overflow:ellipsis;89
}90
.star dl{}{91
width:198px;92
margin:5px 0;93
float:left;94
}95
.star dl dd{}{96
float:left;97
margin-left:8px;98
line-height:18px;99
}100
.star dl dt{}{101
float:left;102
}103
.bg{}{104
width:198px;105
margin:5px 0;106
background:#eee;107
float:left;108
}109
.sl01{}{110
background:#eee;111
margin:15px 5px 0 0;112
width:25px;113
height:18px;114
padding-top:7px;115
text-align:center;116
font-weight:bold;117
color:#FF0000;118
}119
.sl02 img{}{120
border:1px solid #ccc;121
padding:3px;122
}123
.sl03 a{}{124
color:#0066CC;125
text-decoration:underline;126
}127
.sl03 a:hover{}{128
color:#FF3300;129
text-decoration:none;130
}131
.sl04{}{132
background:#eee;133
}134
.sl05{}{135
}136
.bg .sl01{}{137
background:#0066cc;138
margin:5px 5px 0 0;139
width:25px;140
height:18px;141
padding-top:7px;142
text-align:center;143
font-weight:bold;144
color:#FF0000;145
}146
.bg .sl02 img{}{147
display:none;148
}149
.bg .sl03{}{150
width:140px;151
}152
.bg .sl04{}{153
background:#eee;154
width:140px;155
}156
.bg .sl05{}{157
display:none;158
}159
</style>160
</head>161
<body>162
<div class="door_container">163
<div class="TabTitle">164
<ul id="myTab">165
<li class="active" onmouseover=nTabs(this,0);>活跃网友</li>166
<li class="normal" onmouseover=nTabs(this,1);>最新加入</li>167
</ul>168
</div>169
<div class="TabContent">170
<div id=myTab_Content0>171
<div class="star">172
<dl id=a1 onmouseover=show_king_list(this,1);>173
<dt class="sl01">01</dt>174
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>175
<dd class="sl03"><a href="#">网页代码站</a></dd>176
<dd class="sl04">26岁·河南 郑州</dd>177
<dd class="sl05">人气:5236</dd>178
</dl>179
<dl class=bg id=a2 onmouseover=show_king_list(this,2);>180
<dt class="sl01">01</dt>181
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>182
<dd class="sl03"><a href="#">网页代码站</a></dd>183
<dd class="sl04">26岁·河南 郑州</dd>184
<dd class="sl05">人气:5236</dd>185
</dl>186
<dl class=bg id=a7 onmouseover=show_king_list(this,7);>187
<dt class="sl01">01</dt>188
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>189
<dd class="sl03"><a href="#">源码爱好者</a></dd>190
<dd class="sl04">26岁·河南 郑州</dd>191
<dd class="sl05">人气:5236</dd>192
</dl>193
<dl class=bg id=a10 onmouseover=show_king_list(this,10);>194
<dt class="sl01">01</dt>195
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>196
<dd class="sl03"><a href="#">网页代码站</a></dd>197
<dd class="sl04">26岁·河南 郑州</dd>198
<dd class="sl05">人气:5236</dd>199
</dl>200
</div>201
</div>202
<div class="none" id=myTab_Content1>203
<div class="star">204
<dl id=b1 onmouseover=show_kinga_list(this,1);>205
<dt class="sl01">01</dt>206
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/1/122/751/1227510.gif" alt="" /></a></dt>207
<dd class="sl03"><a href="#">我心永恒</a></dd>208
<dd class="sl04">26岁·河南 郑州</dd>209
<dd class="sl05">人气:5236</dd>210
</dl>211
<dl class=bg id=b4 onmouseover=show_kinga_list(this,4);>212
<dt class="sl01">01</dt>213
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>214
<dd class="sl03"><a href="#">我心永恒</a></dd>215
<dd class="sl04">26岁·河南 郑州</dd>216
<dd class="sl05">人气:5236</dd>217
</dl>218
<dl class=bg id=b5 onmouseover=show_kinga_list(this,5);>219
<dt class="sl01">01</dt>220
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>221
<dd class="sl03"><a href="#">我心永恒</a></dd>222
<dd class="sl04">26岁·河南 郑州</dd>223
<dd class="sl05">人气:5236</dd>224
</dl>225
<dl class=bg id=b6 onmouseover=show_kinga_list(this,6);>226
<dt class="sl01">01</dt>227
<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>228
<dd class="sl03"><a href="#">我心永恒</a></dd>229
<dd class="sl04"></dd>230
<dd class="sl05">人气:5236</dd>231
</dl>232
</div>233
</div>234
</div>235
</div>236
</body>237
</html>238
239
