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. MySQl开发和生产环境索引对比

    --1.创建索引信息表create table `t_index_update` (  `table_name` varchar(20) COLLATE gbk_bin DEFAULT NULL,  ...

  2. Spring+SpringMVC+MyBatis深入学习及搭建(十三)——SpringMVC入门程序（二）

    1.非注解的处理器映射器和适配器 1.1非注解的处理器映射器 前面我们配置的org.springframework.web.servlet.handler.BeanNameUrlHandlerMapp ...

  3. Entity Framework Core 生成跟踪列

    本文翻译自<Entity Framework Core: Generate tracking columns>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 注意:我使用的是 ...

  4. 解决React Native unable to load script from assets index.android.bundle on windows

    React Native运行的时候,经常碰到React Native unable to load script from assets index.android.bundle on windows ...

  5. plsql 数据迁移——导出表结构，表数据，表序号

    场景:项目开发完之后要部署在不同的环境进行测试,这时候就需要将数据库中的表结构,序号,数据进行迁移,这时候就需要能够熟练的使用plsql. 问题: 导出的表结构,在另一个数据库中无法导入 部分表的数据 ...

  6. （转）添加eclipse、MyEclipse、Spring Tool Suite的反编译插件

    很多兄弟为在IDE里看不到源代码类而不得不下一个反编译工具,但是这样会降低代码效率,如果能直接在IDE里看,何乐而不为呢!现在我整理了一下网上很多兄弟的设置反编译的经验. 可分为下面几步. 1 下载J ...

  7. 微信小程序（一）基本知识初识别

    最近微信圈里小程序很火的样子,以前小程序刚开始的时候研究了一下,多日没关注发现一些东西都淡忘了,最后决定还是记录下来的好. 毕竟好记星比不上烂笔头嘛~ 另外有想学习小程序的同学,也可以参考下,当然如果 ...

  8. HTML5 开发APP( 支付宝支付)

    我们搞app有一个重要的功能那就是支付功能.无论是微信支付,支付宝,还是银联支付总要有一样支付手段来支持我们网上付款.实现完整的功能.我们公司app的支付方式经过大家开会讨论选择了支付宝支付(其实是当 ...

  9. ES6数字扩展

    前面的话 本文将详细介绍ES6数字扩展 指数运算符 ES2016引入的唯一一个JS语法变化是求幂运算符,它是一种将指数应用于基数的数学运算.JS已有的Math.pow()方法可以执行求幂运算,但它也是 ...

  10. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...