京东地址导航js+css
2021-06-08 01:02
阅读：482
YPE >
标签：lan get ++ ack 青海 12px i++ lock display
HTML
————————————————————————————————————————————————
span> html>
lang="en">
charset="UTF-8">
href="http://www.soscw.com/css/Job08_08_04.css" rel="stylesheet">
id="site">北京
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
//清除所有样式
for(j=0;j
arr[j].style.color="#999";
}
//添加地址触发样式
this.style.backgroundColor="red";
this.style.color="white";
site.innerHTML=this.innerHTML;
评论
亲，登录后才可以留言！