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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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中的多态性[译]
2011/08/02 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
php扩展开发入门demo示例
2019/09/23 PHP
js loading加载效果实现代码
2009/11/24 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python对切片命名的实现方法
2018/10/16 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
求职教师自荐书
2014/06/19 职场文书
毕业生实习证明
2014/09/19 职场文书
水电施工员岗位职责
2015/04/11 职场文书
农业项目投资意向书
2015/05/09 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
一级电子管军用接收机测评
2022/04/05 无线电