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

代码如下:

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

赞 (0)

相关推荐

  • js确认删除对话框适用于a标签及submit

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JS代码放在head和body中的区别分析

    那么有什么不同呢?先看一个例子: 一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0". 复制代码 代码如下: <head> function changelocation(id) {----} </head> <body><select class="input1" id="vSort0" name="vSort0" onChange="changeloc

  • JavaScript实现获取用户单击body中所有A标签内容的方法

    本文实例讲述了JavaScript实现获取用户单击body中所有A标签内容的方法.分享给大家供大家参考,具体如下: var tbody = document.body; tbody.onclick = function (e) { getUrl(e); } function getUrl(e) { e = e || event; var target = e.target || e.srcElement, href; alert(target.tagName); //获取到A标签中的onclic

  • Javascript中使用A标签获取当前目录的绝对路径方法

    一谈到路径相关的问题,大家都会往window.location上想,确实这个对象提供了相当多的路径信息,其中常用的就包括: 1.location.href:当前页面的完整URL 2.location.pathname:当前URL中的路径名 3.location.hash:当前URL中的锚点 4.location.search:当前URL中的查询参数 然而,location没有一个属性能直接获得当前目录(不含文件名)的绝对路径.通过Google我发现了一些错误的方法,比如说把URL通过"/&quo

  • 在JS中a标签加入单击事件屏蔽href跳转页面

    我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • JavaScript设置body高度为浏览器高度的方法

    本文实例讲述了JavaScript设置body高度为浏览器高度的方法.分享给大家供大家参考.具体实现方法如下: div节点高度要实现百分比,其父节点必须要有确定的高度.所以在body节点下的子节点若想要用百分比来确定高度时,就必须给body给定一个高度. 复制代码 代码如下: <script>          setTimeout(function(){              document.getElementsByTagName('body')[0].style.height =

  • JavaScript中window、doucment、body的解释

    Window 对象表示浏览器中打开的窗口. 即一个浏览器窗口只有一个window对象. Document对象是载入浏览器的 HTML 文档 即window载入document. Body 对象代表HTML文档的主体(HTML body).

随机推荐