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. webpack 多页应用架构系列实战

    阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpac ...

  2. 20170722_php_单例模式

    <?php class myClass{ private static $obj = null; private function __construc(){ } public static f ...

  3. 本地Server发布外网Web应用（Oray实现）

    主要讲解如何将本地当做服务器,发布Web应用至外网访问.   准备条件: 1.web应用服务(此处为Tomcat作为web应用服务器): 2.花生壳应用:   第一步,正常搭建本地web项目,应用名为 ...

  4. 【转载】CANoe 入门 Step by step系列（三）简单例子的剖析

    来源:http://www.cnblogs.com/dongdonghuihui/archive/2012/09/26/2704623.html 最好的学习方式是什么?模仿.有人会问,那不是山寨么?但 ...

  5. [编辑器]vim常用操作

    我是ide的用户,对于vim一只停留在:打开.看.写.关闭基本操作,因为现在更多的接触linux服务器,所以为了提高 效率,用好vim是必备技能!下面罗列一些vim的常用操作,用做备忘(不断更新): ...

  6. salesforce零基础学习（七十五）浅谈SOSL（Salesforce Object Search Language）

    在工作中,我们更多操作的是一个表的对象,所以我们对SOQL的使用很多.但是有时候,我们需要对几个表进行查询操作,类似salesforce的全局搜索功能,这时,使用SOQL没法满足功能了,我们就需要使用 ...

  7. thinkphp 5 前台格式化输出日期

    thinkphp格式化输出 {$time|strtotime|date="Y年m月d日",###}   $time 是日期字符串,一般后台的时间是"Y-m-d h:i:s ...

  8. 快速搞定selenium grid分布式

    写这篇文章,似乎有点重复造轮子的嫌疑.当看了几篇相关文章后,我还是决定把半年前的半成品给完成了. 以传统的方式部署分布式Selenium Grid集群需要耗费大量时间和机器成本来准备测试环境. Sna ...

  9. （转）每天一个linux命令（50）：crontab命令

    场景:在学习Linux环境下自动部署项目时候,可以通过crontab命令设定定时任务,实现服务端项目的自动部署! 前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系 ...

  10. Objective-C AVPlayer播放视频的使用与封装

    大致效果 不要介意.界面有点丑... 界面搭建 看下成员变量就知道我怎么搭建的了,这里我将video播放层的size作为参照量,对所有控件的size按照其video的size宽高进行比例缩放 @int ...