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,否则添加的背景是一整行。

Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
js运动应用实例解析
Dec 28 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
推荐文章系统(一)
2006/10/09 PHP
php mysql索引问题
2008/06/07 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python zip()函数的使用示例
2020/09/23 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
什么是接口(Interface)?
2013/02/01 面试题
军训鉴定表自我鉴定
2014/02/13 职场文书
说明书格式及范文
2014/05/07 职场文书
教师专业自荐信
2014/05/31 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2015年组织部工作总结
2015/04/03 职场文书
红高粱观后感
2015/06/10 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL