编程 Javascript

JS 实现点击a标签的时候让其背景更换

Posted in Javascript onOctober 15, 2013

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type=text/javascript src="alabel.js"></script> 
<style type="text/css"> 
.curr{background:blue;display:inline;} 
</style> </head> 
<body> 
<div class="clMenu"> 
<span><a href="#">1</a></span> 
</div> 
</body> 
</html>

在alabel.js中：

window.onload = function () 
{ 
var aspan = document.getElementsByTagName("span"); 
var i = 0; 
for (i = 0; i < aspan.length; i++) 
{ 
aspan[i].onclick = function () 
{ 
for (i = 0; i < aspan.length; i++) aspan[i].className = ""; 
this.className = "curr"; 
}; 
} 
};

这样就可以实现在点击a标签的时候给其添加红色的背景。

注意：curr的属性中display不能是block，否则添加的背景是一整行。

JS 实现点击a标签的时候让其背景更换

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery.cookie.js 操作cookie实现记住密码功能的实现代码

Apr 27 Javascript

jQuery实现id模糊查询的小例子

Mar 19 Javascript

cookie中的path与domain属性详解

Dec 18 Javascript

以JSON形式将JS中Array对象数组传至后台的方法

Jan 06 Javascript

jquery提交form表单简单示例分享

Mar 03 Javascript

JavaScript对象的property属性详解

Apr 01 Javascript

Bootstarp 基础教程之表单部分实例代码

Feb 03 Javascript

深入理解AngularJS中的ng-bind-html指令

Mar 27 Javascript

Vue实现导出excel表格功能

Mar 30 Javascript

创建echart多个联动的示例代码

Nov 23 Javascript

vue中beforeRouteLeave实现页面回退不刷新的示例代码

Nov 01 Javascript

解决vue项目axios每次请求session不一致的问题

Oct 24 Javascript

JS操作Cookies的小例子

Oct 15 #Javascript

如何在父窗口中得知window.open()出的子窗口关闭事件

Oct 15 #Javascript

JavaScript中prototype为对象添加属性的误区介绍

Oct 15 #Javascript

JS格式化数字保留两位小数点示例代码

Oct 15 #Javascript

js计算字符串长度包含的中文是utf8格式

Oct 15 #Javascript

Javascript中查找不以XX字符结尾的单词示例代码

Oct 15 #Javascript

通过js获取div的background-image属性

Oct 15 #Javascript

You might like

php连接mysql数据库代码

2009/03/10 PHP

paypal即时到账php实现代码

2010/11/28 PHP

php session_start()出错原因分析及解决方法

2013/10/28 PHP

eaglephp使用微信api接口开发微信框架

2014/01/09 PHP

php实现图片添加描边字和马赛克的方法

2014/12/10 PHP

php metaphone()函数及php localeconv() 函数实例解析

2016/05/15 PHP

PHP使用new StdClass()创建空对象的方法分析

2017/06/06 PHP

使用vs code编辑调试php配置的方法

2019/01/29 PHP

JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）

2016/01/05 Javascript

全面解析JavaScript中“&&”和“||”操作符(总结篇)

2016/07/18 Javascript

又一款js时钟!transform实现时钟效果

2016/08/15 Javascript

Nodejs基于LRU算法实现的缓存处理操作示例

2017/03/17 NodeJs

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

2017/06/16 Javascript

vue-router 权限控制的示例代码

2017/09/21 Javascript

jQuery的ztree仿windows文件新建和拖拽功能的实现代码

2018/12/05 jQuery

如何获取vue单文件自身源码路径

2019/05/06 Javascript

vue 地图可视化 maptalks 篇实例代码详解

2019/05/21 Javascript

基于原生JS封装的Modal对话框插件的示例代码

2020/09/09 Javascript

vue实现下载文件流完整前后端代码

2020/11/17 Vue.js

Vue实现摇一摇功能(兼容ios13.3以上)

2021/01/26 Vue.js

[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG

2014/05/25 DOTA

[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片

2015/02/07 DOTA

Python基类函数的重载与调用实例分析

2015/01/12 Python

python实现读取命令行参数的方法

2015/05/22 Python

Python使用正则表达式过滤或替换HTML标签的方法详解

2017/09/25 Python

Django学习教程之静态文件的调用详解

2018/05/08 Python

pycharm 将django中多个app放到同个文件夹apps的处理方法

2018/05/30 Python

浅谈Tensorflow由于版本问题出现的几种错误及解决方法

2018/06/13 Python

使用django-guardian实现django-admin的行级权限控制的方法

2018/10/30 Python

Python爬虫自动化获取华图和粉笔网站的错题(推荐)

2021/01/08 Python

HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例

2015/04/24 HTML / CSS

年终晚会主持词

2014/03/25 职场文书

租房合同协议书

2014/04/09 职场文书

2015年精神文明建设工作总结

2015/04/21 职场文书

停课通知书

2015/04/24 职场文书

欢送领导祝酒词

2015/08/12 职场文书