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].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的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  3. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  4. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  5. Spring3中js/css/jpg/gif等静态资源无法找到（No mapping found for HTTP request with URI）问题解决--转载

    原文地址:http://www.programgo.com/article/96083031845/ 最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情, ...

  6. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  7. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  8. 压缩JS,CSS的工具

    目标: 压缩项目中的JS,CSS文件. 方法一:使用uglifyjs uglifycss 压缩JS: 1.安装NODEJS.是一个在服务端运行的JS语言.下载地址https://nodejs.org/ ...

  9. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

随机推荐

  1. 开发servlet三种方式

    第一种:实现Servlet接口 ServletDemo类 实现Servlet接口 public class ServletDemo implements Servlet { //初始化该servlet ...

  2. shell基本语法

    一.变量 1.变量的命名规则:以字母或下划线开头,后面跟数字,字母或下划线,最好不要随便命名,要做到看见变量名能猜出其含义 2.变量赋值: x=100 echo $x 删除变量:unset x 3.定 ...

  3. python基础（7）：字符编码

    今天我们进入字符编码的学习.字符编码是一个多理论少结论的知识点,我会总结很多的知识点.我们只需要通读当作了解即可,最后我会总结需要我们理解掌握的重点. 一.学习字符编码的计算机基础储备 1.计算机软件 ...

  4. new DefaultHttpClient过时处理建议和HTTP调用后关闭流处理

    因为工作中经常会写点接口类需求,写完HTTP的接口后,就要写测试类来调下服务端的代码.最近写新的测试调用代码时候,发现项目中new DefaultHttpClient()实例过期很久了,于是查阅了些资 ...

  5. Spring Ioc-依赖注入的几种方式

    一 setter方法注入 配置文件如下: <bean id="helloAction" class="org.yoo.action.SpringSetterHell ...

  6. C# 代码规范和质量检查工具 StyleCop.Analyzers

    简介 原来一直用 ReSharper 来进行代码质量检查,不过毕竟是收费的,所以想找个免费的可以推广给公司的同事也一起用.搜索了一下,找到了StyleCop,但是我在 VS 2015里安装 Style ...

  7. php+sqlserver实现分页效果

    找了一些实现的代码,都或多或少有点问题. 主要问题在于: 在进行一页数据查询时的sql语句格式问题, 开始尝试使用limit关键字查询,错误,limit用于mysql: 接着使用ROWNUM.row_ ...

  8. Java栈与堆 （转）

    1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直接位于C ...

  9. centos7下安装PHP swoole扩展

    PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...

  10. pwnable.kr bof之write up

    这一题与前两题不同,用到了静态调试工具ida 首先题中给出了源码: #include <stdio.h> #include <string.h> #include <st ...