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. 集合用法笔记-Map用法

    一.Map遍历 Map<String, String> map = new HashMap<String, String>(); map.put("1", ...

  2. .NET平台的ORM分析工具

    众所周知,“ORM”和“性能问题”常常一起出现.ORM通过对开发人员隐藏SQL细节可以大大的提高生产力.然而,它们很容易产生一些未被发现的荒谬查询.通常情况下,数据库管理员可以通过交叉引用有问题的存储 ...

  3. Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-AbstractApplicationContext 约束: 本文指定contextClass为默认的XmlWebApplicati ...

  4. Redis作为消息队列服务场景应用案例（入队和出队）

    http://www.cnblogs.com/leo_wl/p/3831349.html

  5. Asp.Net MVC-4-过滤器1：认证与授权

    基础 过滤器体现了MVC框架中的Aop思想,虽然这种实现并不完美但在实际的开发过程中一般也足以满足需求了. 过滤器分类 依据上篇分析的执行时机的不同可以把过滤器按照实现不同的接口分为下面五类: IAu ...

  6. 【逻辑漏洞】基于BurpSuite的越权测试实战教程

    一.什么是越权漏洞?它是如何产生的? 越权漏洞是Web应用程序中一种常见的安全漏洞.它的威胁在于一个账户即可控制全站用户数据.当然这些数据仅限于存在漏洞功能对应的数据.越权漏洞的成因主要是因为开发人员 ...

  7. post提交数据长度限制问题

    最近做手机拍照照片上传时,由于图片较大,base64后字符串长度太长,所以提交失败. 修改Tomcat服务器的maxPostSize=0,解决完成! <Connector connectionT ...

  8. C#和NewSQL更配 —— CockroachDB入门（可能是C#下的全网首发）

    阅读目录 CockroachDB是什么 环境部署 实战 性能测试 结语 一.CockroachDB是什么 CockroachDB(https://www.cockroachlabs.com)是Goog ...

  9. Unicode 与 Unicode Transformation Format(UTF，UTF-8 / UTF-16 / UTF-32)

    ASCII(American Standard Code for Information Interchange):早期它使用7 bits来表示一个字符,总共表示27 = 128个字符:后来扩展到8 ...

  10. iOS底层学习-KVC使用实践以及实现原理

    简介 KVC(Key-value coding)键值编码,顾名思义.额,简单来说,是可以通过对象属性名称(Key)直接给属性值(value)编码(coding)"编码"可以理解为& ...