如何实现超链接为javascript时点击后其颜色变化

w_dalu 2012-10-29 05:23:34

各位大神，救救我吧，怎样实现超链接为javascript时点击后，使其颜色变化，与其他不同。
例如，代码
<div class="type_div">
<h3>类型</h3>
<a href="javascript: load_type( '0' );">N/A</a>
<a href="javascript: load_type( '1' );">A</a>
<a href="javascript: load_type( '2' );">B</a>
<a href="javascript: load_type( '3' );">C</a>
</div>
如何使用javascript来实现点击A时把A文本的颜色变色。（CSS只对href为url的形式进行点击后改变）

...全文

796 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

拼命二郎 2012-10-31

打赏
举报

<!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>
<style type="text/css">
body{ padding:0; margin:0;}
.type_div{ margin:0; padding:0;}
.type_div a{ text-decoration:none; outline:none;}
.type_divA{ color:#000; text-decoration:none; outline:none;}
.type_divB{ color:#F00; text-decoration:none; outline:none;}
.type_divC{ color:#000; text-decoration:none; outline:none;}
</style>
<script type="text/javascript">
function setColor(){
var xA=document.getElementById("type_div").getElementsByTagName("a");
for(var i=0;i<xA.length;i++){
if(xA[i].className=="type_divA"){
xA[i].onmouseout=function(){this.className="type_divB"};
}
}
}
</script>
</head>

<body>
<div class="type_div" id="type_div">
<h3>类型</h3>
<a class="type_divA" onclick="setColor()" href="#">N/A</a>
<a class="type_divA" onclick="setColor()" href="#">A</a>
<a class="type_divC" href="#">B</a>
<a class="type_divC" href="#">C</a>
</div>
</body>
</html>

这个是最笨的方法了吧~

w_dalu 2012-10-31

打赏
举报

这个不错，点击后如何恢复其他对象的属性[Quote=引用 10 楼的回复:]

<!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="Conte……
[/Quote]

碧海情天-赵亮 2012-10-30

打赏
举报

考虑到楼主的心情，还是管管吧。但你自己去试一下CSS HACK，我卸载CHROME了，测试不了。

碧海情天-赵亮 2012-10-30

打赏
举报

[Quote=引用 6 楼的回复:]
IE9下颜色改变，但不弹出提示框。
Chrome下颜色没有改变，但弹出提示框了。
[/Quote]
弹框倒不是必须的，只是为证明是JS语句。
不过不弹框的问题，IE9倒也显得有点另类，反正我是没用，也不打算用那个故意抛弃XP的玩意。
你试试这样吧
<a class="theforever_knight1" href=# onclick="javascript:alert(1)">1111</a>
<a class="theforever_knight2" href=# onclick="javascript:alert('A')">AAA</a>
在CHROME不变色的问题，不想管了，我发过一个帖子专门说CHROME的问题，这玩意我也烦它。

w_dalu 2012-10-30

打赏
举报

弱弱的问一下，this.style.color='#aaaaaa'是对什么对象的属性进行着色？

[Quote=引用 4 楼的回复:]

引用 3 楼的回复:
引用 2 楼的回复:

<a href="javascript: load_type( '0' );this.style.color='#aaaaaa'">N/A</a>

其他同样的改法

好像不行啊

除非你的函数已经错误，导致后面的代码不被执行，不然是一定可以的
换个位置测试
<a href="javascript:this.style.c……
[/Quote]

w_dalu 2012-10-30

打赏
举报

IE9下颜色改变，但不弹出提示框。
Chrome下颜色没有改变，但弹出提示框了。[Quote=引用 5 楼的回复:]

HTML code
<style>
a.theforever_knight1:visited {color:green;}
a.theforever_knight2:visited {color:red;}
</style>
<a class="theforever_knight1" href="javascript: alert(1)">1111</a>
<a class="theforev……
[/Quote]

碧海情天-赵亮 2012-10-30

打赏
举报

<style>

a.theforever_knight1:visited {color:green;}

a.theforever_knight2:visited {color:red;}

</style>

<a class="theforever_knight1" href="javascript: alert(1)">1111</a>

<a class="theforever_knight2" href="javascript: alert('A')">AAA</a>

未知数 2012-10-30

打赏
举报

[Quote=引用 3 楼的回复:]
引用 2 楼的回复:

<a href="javascript: load_type( '0' );this.style.color='#aaaaaa'">N/A</a>

其他同样的改法

好像不行啊
[/Quote]
除非你的函数已经错误，导致后面的代码不被执行，不然是一定可以的
换个位置测试
<a href="javascript:this.style.color='#aaaaaa';load_type( '0' );">N/A</a>

w_dalu 2012-10-30