javascript地区分类选择特效,该效果是仿照淘宝地区分类做的，具体效果请看demo，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js城市选择</title>
<style type="text/css">
*{ padding:0; margin:0; list-style-type:none;}
body{font-family: "宋体";font-size: 12px;}
#t_con{ width:60px; line-height:20px; color:#00F; cursor:pointer; margin:20px auto 0 auto; border:1px #09C dashed; text-align:center;}
#t_area{ width:268px; overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area ul{ margin:10px 0;}
#t_area li{ width:60px; height:18px; float:left; display:inline; text-align:center; line-height:18px; margin:4px auto auto 5px; }
#t_area li a{ color:#00F; text-decoration:none;}
#t_area li a:hover,a:active{ color:#fff; text-decoration:underline;}
</style>
<script type="text/javascript">
function showarea(){
var con = document.getElementById("t_area");
var arealist = con.getElementsByTagName("li");
var g = document.getElementById("t_con")
con.style.display = "block";
for (var i=0;i<arealist.length;i++){
arealist[i].onmouseover = function(){this.style.backgroundColor = "#9CC2DA"}
arealist[i].onmouseout = function(){this.style.backgroundColor = "#F1F9FC"}
arealist[i].onclick = function(){
g.innerHTML = this.innerHTML ;
con.style.display = "none";
}
}
}
function offarea(){
var con = document.getElementById("t_area");
con.style.display = "none";
}
var timer;
</script>
</head>
<body>
<div id="t_con" onmouseover="showarea();clearTimeout(timer)" onmouseout="timer=setTimeout('offarea()',200);">四川</div>
<div id="t_area" onmouseover="showarea()" onmouseout="offarea();clearTimeout(timer)">
<ul>
<li><a href="">全部</a></li>
<li><a href="//www.submisscin.com/wap/#">四川</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
<li><a href="//www.submisscin.com/wap/#">上海</a></li>
<li><a href="//www.submisscin.com/wap/#">北京</a></li>
<li><a href="//www.submisscin.com/wap/#">天津</a></li>
<li><a href="//www.submisscin.com/wap/#">河北</a></li>
<li><a href="//www.submisscin.com/wap/#">黑龙江</a></li>
</ul>
</div>
</body>
</html>
更多信息请查看IT技术专栏