javascript地区分类选择特效

javascript地区分类选择特效

来源：阅读：768 次日期：2015-03-18 11:26:36

温馨提示：小编为您整理了“javascript地区分类选择特效”,方便广大网友查阅！

javascript地区分类选择特效,该效果是仿照淘宝地区分类做的，具体效果请看demo，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>js城市选择</title>

*{ 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>

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>

<ul>

</ul>

</div>

</body>

</html>

更多信息请查看IT技术专栏

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！