京东地址导航js+css

最新推荐文章于 2022-05-24 12:09:27 发布

antixian2066

最新推荐文章于 2022-05-24 12:09:27 发布

阅读量246

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AgilityJin/p/7323399.html

版权

HTML
————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地址选项卡</title>
<link href="../css/Job08_08_04.css" rel="stylesheet">
</head>
<body>
<div>
<span id="site">北京</span>
<table>
<tr>
<td><a href="#" class="init">北京</a></td>
<td><a href="#">上海</a></td>
<td><a href="#">天津</a></td>
<td><a href="#">重庆</a></td>
<td><a href="#">河北</a></td>
</tr>
<tr>
<td><a href="#">山西</a></td>
<td><a href="#">河南</a></td>
<td><a href="#">辽宁</a></td>
<td><a href="#">吉林</a></td>
<td><a href="#">黑龙江</a></td>
</tr>
<tr>
<td><a href="#">内蒙古</a></td>
<td><a href="#">江苏</a></td>
<td><a href="#">山东</a></td>
<td><a href="#">安徽</a></td>
<td><a href="#">浙江</a></td>
</tr>
<tr>
<td><a href="#">福建</a></td>
<td><a href="#">湖北</a></td>
<td><a href="#">湖南</a></td>
<td><a href="#">广东</a></td>
<td><a href="#">广西</a></td>
</tr>
<tr>
<td><a href="#">江西</a></td>
<td><a href="#">四川</a></td>
<td><a href="#">海南</a></td>
<td><a href="#">贵州</a></td>
<td><a href="#">云南</a></td>
</tr>
<tr>
<td><a href="#">西藏</a></td>
<td><a href="#">陕西</a></td>
<td><a href="#">甘肃</a></td>
<td><a href="#">青海</a></td>
<td><a href="#">宁夏</a></td>
</tr>
<tr>
<td><a href="#">新疆</a></td>
<td><a href="#">港澳</a></td>
<td><a href="#">台湾</a></td>
<td><a href="#">钓鱼岛</a></td>
<td><a href="#">海外</a></td>
</tr>
</table>
</div>
<script type="text/javascript" src="../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].οnclick=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;