js 点击一个链接后变色,但在点击页面其它链接不变色(方法一)

最新推荐文章于 2021-06-04 05:12:51 发布

相随心声

最新推荐文章于 2021-06-04 05:12:51 发布

阅读量5.5k

点赞数 2

分类专栏： JS 文章标签： xhtml firefox chrome 浏览器 ie html

本文链接：https://blog.csdn.net/xiangsuixinsheng/article/details/6591212

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

document.οnclick=ok;

function ok(ev){

//事件

ev=ev || window.event;

//获取事件源

var target=ev.target || ev.srcElement;

//获取点击事件

var dragObj=target.getAttribute("id");

//获取所有的a标签

var atagArray=document.getElementByTagName("a");

for(var i=0;i<atagArray.length;i++){

if(dragObj==atagArray[i].getAttribute("id")){

//我第一次写此行代码时,写错了,让我纠结了半天,atagArray[i]已经是一个标签对象了,而我还用atagArray[i].getAttribute("id")去取,显示是重复了,因此浏览器是不会让我们去设置标签对象的属性的,把此行代码改成var objId =atagArray[i].style.color="green";就行了。

var objId =atagArray[i].getAttribute("id").style.color="green";

}else if(atagArray[i].getAttribute("id")!=null&&atagArray[i].getAttribute("id")!=dragObj){

//注意此行代码与var objId =atagArray[i].getAttribute("id").style.color="green";出的错是一样的,必须把它改成atagArray[i].style.color="black",才能使用被设置的标签对象的属性发生改变。

var objId =atagArray[i].getAttribute("id").style.color="black";

}

}

}

</script>

以上代码只能兼容FF、Chrome但不兼容IE。

我在公司让上面的这段代码兼容IE6.0、7.0时,它死活都不兼容,把我头都弄晕了。晚上我回到家再用FireFox调试终于找到问题了。

代码如下:

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

document.οnclick=ok;
function ok(ev){

//事件
ev=ev || window.event;

//获取事件源
var target=ev.target || ev.srcElement;

//获取点击事件
var dragObj=target.id;
//alert(dragObj);
//获取所有的a标签
var atagArray=document.getElementsByTagName("a");
//alert(atagArray.length);
for(var i=0;i<atagArray.length;i++){
//alert(atagArray[i].id);
if(dragObj==atagArray[i].id){
//alert("in: "+atagArray[i].id);
var objId =atagArray[i].style.color="green";

}else if(atagArray[i].id!=null&&atagArray[i].id!=dragObj){
//alert("in: "+atagArray[i].id);
var objId =atagArray[i].style.color="black";

}

}

}

</script>

<style type="text/css">
a:hover{ text-decoration:none;
}
</style>
</head>
<body>
<table>
<tr><td><a id="aaa" href="#">aaa</a></td></tr>
<tr><td><a id="bbb" href="#">bbb</a></td></tr>
<tr><td><a id="ccc" href="#">ccc</a></td></tr>
<tr><td><a id="ddd" href="#">ddd</a></td></tr>
<tr><td><a id="eee" href="#">eee</a></td></tr>
<tr><td><a id="fff" href="#">fff</a></td></tr>
</table>
</body>
</html>