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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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之PHP语法学习笔记1
2006/12/17 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
详解php反序列化
2020/06/10 PHP
二级域名转向类
2006/11/09 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
js实现无缝轮播图
2020/03/09 Javascript
谈谈如何手动释放Python的内存
2016/12/17 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
flask框架路由常用定义方式总结
2019/07/23 Python
详解Python3定时器任务代码
2019/09/23 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
pygame实现飞机大战
2020/03/11 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
夜大自我鉴定
2013/10/31 职场文书
自荐书模板
2013/12/15 职场文书
中学运动会广播稿
2014/01/19 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
保证书范文大全
2014/04/28 职场文书
学校班班通实施方案
2014/06/11 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
二人合伙经营协议书
2014/09/13 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers