首页 > 代码库 > 京东地址导航js+css
京东地址导航js+css
HTML
————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地址选项卡</title>
<link href="http://www.mamicode.com/css/Job08_08_04.css" rel="stylesheet">
</head>
<body>
<div>
<span id="site">北京</span>
<table>
<tr>
<td><a href="http://www.mamicode.com/#" class="init">北京</a></td>
<td><a href="http://www.mamicode.com/#">上海</a></td>
<td><a href="http://www.mamicode.com/#">天津</a></td>
<td><a href="http://www.mamicode.com/#">重庆</a></td>
<td><a href="http://www.mamicode.com/#">河北</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">山西</a></td>
<td><a href="http://www.mamicode.com/#">河南</a></td>
<td><a href="http://www.mamicode.com/#">辽宁</a></td>
<td><a href="http://www.mamicode.com/#">吉林</a></td>
<td><a href="http://www.mamicode.com/#">黑龙江</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">内蒙古</a></td>
<td><a href="http://www.mamicode.com/#">江苏</a></td>
<td><a href="http://www.mamicode.com/#">山东</a></td>
<td><a href="http://www.mamicode.com/#">安徽</a></td>
<td><a href="http://www.mamicode.com/#">浙江</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">福建</a></td>
<td><a href="http://www.mamicode.com/#">湖北</a></td>
<td><a href="http://www.mamicode.com/#">湖南</a></td>
<td><a href="http://www.mamicode.com/#">广东</a></td>
<td><a href="http://www.mamicode.com/#">广西</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">江西</a></td>
<td><a href="http://www.mamicode.com/#">四川</a></td>
<td><a href="http://www.mamicode.com/#">海南</a></td>
<td><a href="http://www.mamicode.com/#">贵州</a></td>
<td><a href="http://www.mamicode.com/#">云南</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">西藏</a></td>
<td><a href="http://www.mamicode.com/#">陕西</a></td>
<td><a href="http://www.mamicode.com/#">甘肃</a></td>
<td><a href="http://www.mamicode.com/#">青海</a></td>
<td><a href="http://www.mamicode.com/#">宁夏</a></td>
</tr>
<tr>
<td><a href="http://www.mamicode.com/#">新疆</a></td>
<td><a href="http://www.mamicode.com/#">港澳</a></td>
<td><a href="http://www.mamicode.com/#">台湾</a></td>
<td><a href="http://www.mamicode.com/#">钓鱼岛</a></td>
<td><a href="http://www.mamicode.com/#">海外</a></td>
</tr>
</table>
</div>
<script type="text/javascript" src="http://www.mamicode.com/js/Job08_08_04.js"></script>
</body>
</html>
CSS
——————————————————————————————————————————————
*{margin: 0;padding: 0}
/*地址样式*/
span{
display: block;
width: 58px;
height: 26px;
color: #999;
line-height: 24px;
font-size: 12px;
text-align: center;
}
/*地址单元样式*/
a{
display: block;
color: #999;
width: 44px;
height: 18px;
line-height: 18px;
font-size: 12px;
collapse: 100px;
text-decoration: none;
}
/*表格样式*/
table{
width: 300px;
height: 200px;
text-align: center;
display: none;
}
/*单元格样式*/
td{
width: 58px;
height: 26px;
}
/*悬浮时关闭隐藏*/
div:hover>table{
display: block;
}
/*悬浮时改变样式*/
td:hover a{
background-color: #999;
color: red;
}
/*默认地址样式*/
.init{
color: white;
background-color: red;
}
/*默认地址的悬浮样式*/
.init:hover{
color: white;
background-color: red;
}
JavaScript
————————————————————————————————————
// 将所有a标签放入数组
var arr = document.getElementsByTagName("a");
//获取默认地址
var site = document.getElementById("site");
for(i=0;i<arr.length;i++){
arr[i].onclick=function (){
//清除所有样式
for(j=0;j<arr.length;j++){
arr[j].style.backgroundColor="white";
arr[j].style.color="#999";
}
//添加地址触发样式
this.style.backgroundColor="red";
this.style.color="white";
site.innerHTML=this.innerHTML;
京东地址导航js+css