如何实现超链接为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的形式进行点击后改变)
...全文
795 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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]
  • 打赏
  • 举报
回复
考虑到楼主的心情,还是管管吧。但你自己去试一下CSS HACK,我卸载CHROME了,测试不了。
  • 打赏
  • 举报
回复
[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]
  • 打赏
  • 举报
回复
<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
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

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

其他同样的改法
[/Quote]
好像不行啊
未知数 2012-10-29
  • 打赏
  • 举报
回复
<a href="javascript: load_type( '0' );this.style.color='#aaaaaa'">N/A</a>

其他同样的改法
w_dalu 2012-10-29
  • 打赏
  • 举报
回复
其中,load_type()函数向后台传送不同的参数值。

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧