我要为一个导航加上一些小功能,请JS高手指教一下.

下面是我页面的其中两行代码:
                  <TR>
                    <TD class="nr" height=23> <A id="a1" name="a1"
                        href="list.aspx?wid=4001&pic_id=8001"
                        target=iframe1>大型活动舞美</A> </TD>
                  </TR>
                  <TR>
                    <TD background="" height=3></TD>
                  </TR>
                  <TR>
                    <TD class="nr" height=23> <A id="a2" name="a2"
                        href="list.aspx?wid=4002&pic_id=8001"
                        target=iframe1>大型会务展览</A> </TD>
                  </TR>这是左导航其中的两个选项,我想加上的是:当用户点击某一个选项后,其文字变红色,而且其它选项恢复到正常颜色,也就是点击哪个,哪个变红色,其它的还是正常颜色啦,哪位高手指点一下,这个JS应该如何写?
先谢谢了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

其实如何让它变色我知道用下面这句话就行
document.getElementById(cc).className = 'red';
关键是如何同时取消别的红色,我不清楚了
在<head></head>间加入：
<style type=css/text>
.nr A{background-color:red}
.nr A:hover{background-color:你原来的颜色}
</style>
这个没实现点击变色，而是鼠标悬停变色，个人觉得这样比较好
看需求了　要做成通用的．那就写个类，用来存储改变颜色的方法和所响应的控件ID(控件)．
如果就只做简单的，那就将所有要响应的id(或控件)存贮在数组中．
用foreach顺序执行一下改变颜色（是点中的就红，非点中就默认）
4楼的朋友说的对,我就是在这一个页面做这个效果,应该用简单的那种办法,可是本人是JS脚本编写的超级菜鸟,手上有写好的function让我参考一下?
function superChg(){
this.elements=[];
this.Class={c:"",o:""};
}
superChg.prototype={
setEle:function(id){this.elements.push(id);},
setClass_c:function(c){this.Class.c=c;},
setClass_o:function(o){this.Class.o=o;},
chg:function(id){
for(var i=0;i<this.elements.length;i++){
var _id=this.elements[i];
var obj=document.getElementById();
if(id==_id){
obj.className=this.Class.c;
}
else{
obj.className=this.Class.0;
}
}
}
};
实力化，设置 var NewChg=new superChg();
NewChg.setClass_c("red");
NewChg.setClass_o("black");
NewChg.setEle("123");//
NewChg.setEle("124");//
NewChg.setEle("125");//
......
谢谢zowell的代码,再问一下,我不需要向这个方法里传任何参数吗?就这样直接在ONCLICK事件中直接引用?
8楼有个地方漏掉了var obj=document.getElementById(_id);应用：
<body>
<div onclick="NewChg.chg(this.id)" id="123">123</div>
<div onclick="NewChg.chg(this.id)" id="124">124</div>
<div onclick="NewChg.chg(this.id)" id="125">125</div>
</body>
<TR>
                    <TD class="nr" height=23> <A id="a1" onclick="c(1)" name="a1"
                        href="list.aspx?wid=4001&pic_id=8001"
                        target=iframe1>大型活动舞美 </A> </TD>
                  </TR>
                  <TR>
                    <TD background="" height=3> </TD>
                  </TR>
                  <TR>
                    <TD class="nr" height=23> <A id="a2" onclick="c(2)" name="a2"
                        href="list.aspx?wid=4002&pic_id=8001"
                        target=iframe1>大型会务展览 </A> </TD>
                  </TR> 给你个最简单的吧，介绍一下思路。
<script>
var lastid;//存储上次点击的ID
fucntion c(id){
if(lastid==id){return;}//还是那个连接则不变
document.getElementById("a"+id).style.color='red';
document.getElementById("a"+ lastid).style.color='正常颜色';
lastid=id;//每次电完把这次的链接Id记录下来
}
</script>
好,zowell的代码我看明白了,这就去试试............
你的想法很很不错，给了我很大启发，不写onclick="NewChg.chg(this.id)" 是个很不错的方法。这样需要在原始的类里加上事件驱动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
// JavaScript Document
var addEvent=function (/*documentElement*/el,/*eventType*/type,/*method*/fn){/*为控件加载事件 zowell20090209*/
if (window.addEventListener) {el.addEventListener(type, fn, false);}
    else if (window.attachEvent) {el.attachEvent('on'+type, fn);}
}
function superChg(user){
this.elements=[];
this.Class={c:"",o:""};
this.user=user;
}
superChg.prototype={
setEle:function(id){this.elements.push(id);},
setClass_c:function(c){this.Class.c=c;},
setClass_o:function(o){this.Class.o=o;},
init:function(){ for(var i=0;i<this.elements.length;i++){
document.getElementById(this.elements[i]).onclick=new Function("return "+this.user+".chg("+this.elements[i]+");");
}
},
chg:function(id){
for(var i=0;i<this.elements.length;i++){
var _id=this.elements[i];
var obj=document.getElementById(_id);
if(id==_id){
obj.className=this.Class.c;
}
else{
obj.className=this.Class.o;
}
}
}
};
var NewChg=new superChg("NewChg");
NewChg.setClass_c("red");
NewChg.setClass_o("black");
NewChg.setEle("123");//
NewChg.setEle("124");//
NewChg.setEle("125");//
addEvent(window,"load",function(){
NewChg.init();
});

</script>
<style type="text/css">

</style>
</head><body>
<div  id="123">123</div>
<div  id="124">124</div>
<div  id="125">125</div>
</body>
</html>
这样会不会简单点？
<html>
<head>
<title>demo</title>
<style type="text/css">
.r a { color: red;}
.y a { color: #000;}
td { border: 1px solid #ccc; padding: 10px;} </style>
<script type="text/javascript">
function demo(){

var std = getID("table");

var tt = std.getElementsByTagName('td');

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

tt[i].className = 'y';
tt[i].onclick = function(){
demo();
this.className = "r";
}
} }
function getID(var1){
return document.getElementById(var1);
}

window.onload = demo;
</script>
</head>
<body>

<table id="table">
<tr>
<td class="nr" height=23> <a id="a1" name="a1"
href="list.aspx?wid=4001&pic_id=8001"
target=iframe1>大型活动舞美 </a> </td>
  </tr>
  <tr>
<td background="" height=3> </td>
  </tr>
  <tr>
<td class="nr" height=23> <a
href="list.aspx?wid=4002&pic_id=8001"
target=iframe1>大型会务展览 </a> </td>
  </tr>
  <tr>
<td class="nr" height=23> <a
href="list.aspx?wid=4002&pic_id=8001"
target=iframe1>大型会务展览2 </a> </td>
  </tr>
  <tr>
<td class="nr" height=23> <a
href="list.aspx?wid=4002&pic_id=8001"
target=iframe1>大型会务展览3 </a> </td>
  </tr>
  </table>


</body>
</html>
不知道是什么原因,总是提示我缺少对象???下面是我的代码:
var lastid;//存储上次点击的ID
fucntion color(id){
if(lastid==id){return;}//还是那个连接则不变
document.getElementById(id).className = 'red';
document.getElementById(lastid).className = 'black';
lastid=id;//每次电完把这次的链接Id记录下来
}
页面代码是:
                  <TR>
                    <TD class="nr" height=23> <A id="a1" name="a1" onclick=javascript:color(this.id)
                        href="list.aspx?wid=4001&pic_id=8001"
                        target=iframe1>大型活动舞美</A> </TD>
                  </TR>
                  <TR>
                    <TD background="" height=3></TD>
                  </TR>
                  <TR>
                    <TD class="nr" height=23> <A id="a2" name="a2" onclick=javascript:color(this.id)
                        href="list.aspx?wid=4002&pic_id=8001"
                        target=iframe1>大型会务展览</A> </TD>
                  </TR>哪里出的问题?