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

时间:2022-04-01 03:46:35
下面是我页面的其中两行代码:
                  <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应该如何写?
先谢谢了

19 个解决方案

#1


其实如何让它变色我知道用下面这句话就行
document.getElementById(cc).className = 'red';
关键是如何同时取消别的红色,我不清楚了

#2


在<head></head>间加入:
<style type=css/text>
.nr A{background-color:red}
.nr A:hover{background-color:你原来的颜色}
</style>
这个没实现点击变色,而是鼠标悬停变色,个人觉得这样比较好

#3


2楼的朋友的办法是不错,可公司就是要那种效果,不让我做成别的,没辙,还有招没,再指点一个?呵呵

#4


看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

#5


引用 4 楼 zowell 的回复:
看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

4楼的朋友说的对,我就是在这一个页面做这个效果,应该用简单的那种办法,可是本人是JS脚本编写的超级菜鸟,手上有写好的function让我参考一下?

#6


我没有简单的,只有复杂的 我要为一个导航加上一些小功能,请JS高手指教一下.

#7


急啊,有会写的朋友,指点一下啊,急等用............... 我要为一个导航加上一些小功能,请JS高手指教一下.......

#8


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;
}
}
}
};

#9


实力化,设置
	var NewChg=new superChg();
NewChg.setClass_c("red");
NewChg.setClass_o("black");
NewChg.setEle("123");//
NewChg.setEle("124");//
NewChg.setEle("125");//
......

#10


谢谢zowell的代码,再问一下,我不需要向这个方法里传任何参数吗?就这样直接在ONCLICK事件中直接引用?

#11


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>

#12


<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>

#13


好,zowell的代码我看明白了,这就去试试............

#14


引用 10 楼 zhangchufeng 的回复:
谢谢zowell的代码,再问一下,我不需要向这个方法里传任何参数吗?就这样直接在ONCLICK事件中直接引用?

你的想法很很不错,给了我很大启发,不写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">
<!--
.red {
color: #FF0000;
}
.black{
color: #cccccc;
}
-->
</style>
</head>

<body>
<div  id="123">123</div>
<div  id="124">124</div>
<div  id="125">125</div>
</body>
</html>

#15


这样会不会简单点?


<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>

#16


不知道是什么原因,总是提示我缺少对象???下面是我的代码:
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>

哪里出的问题?

#17


lastid在最开始时没有值的

#18


有道理!

#19


引用 4 楼 zowell 的回复:
看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

foreach 好,我喜欢foreach!

#1


其实如何让它变色我知道用下面这句话就行
document.getElementById(cc).className = 'red';
关键是如何同时取消别的红色,我不清楚了

#2


在<head></head>间加入:
<style type=css/text>
.nr A{background-color:red}
.nr A:hover{background-color:你原来的颜色}
</style>
这个没实现点击变色,而是鼠标悬停变色,个人觉得这样比较好

#3


2楼的朋友的办法是不错,可公司就是要那种效果,不让我做成别的,没辙,还有招没,再指点一个?呵呵

#4


看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

#5


引用 4 楼 zowell 的回复:
看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

4楼的朋友说的对,我就是在这一个页面做这个效果,应该用简单的那种办法,可是本人是JS脚本编写的超级菜鸟,手上有写好的function让我参考一下?

#6


我没有简单的,只有复杂的 我要为一个导航加上一些小功能,请JS高手指教一下.

#7


急啊,有会写的朋友,指点一下啊,急等用............... 我要为一个导航加上一些小功能,请JS高手指教一下.......

#8


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;
}
}
}
};

#9


实力化,设置
	var NewChg=new superChg();
NewChg.setClass_c("red");
NewChg.setClass_o("black");
NewChg.setEle("123");//
NewChg.setEle("124");//
NewChg.setEle("125");//
......

#10


谢谢zowell的代码,再问一下,我不需要向这个方法里传任何参数吗?就这样直接在ONCLICK事件中直接引用?

#11


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>

#12


<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>

#13


好,zowell的代码我看明白了,这就去试试............

#14


引用 10 楼 zhangchufeng 的回复:
谢谢zowell的代码,再问一下,我不需要向这个方法里传任何参数吗?就这样直接在ONCLICK事件中直接引用?

你的想法很很不错,给了我很大启发,不写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">
<!--
.red {
color: #FF0000;
}
.black{
color: #cccccc;
}
-->
</style>
</head>

<body>
<div  id="123">123</div>
<div  id="124">124</div>
<div  id="125">125</div>
</body>
</html>

#15


这样会不会简单点?


<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>

#16


不知道是什么原因,总是提示我缺少对象???下面是我的代码:
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>

哪里出的问题?

#17


lastid在最开始时没有值的

#18


有道理!

#19


引用 4 楼 zowell 的回复:
看需求了 要做成通用的.那就写个类,用来存储改变颜色的方法和所响应的控件ID(控件).
如果就只做简单的,那就将所有要响应的id(或控件)存贮在数组中.
用foreach顺序执行一下改变颜色(是点中的就红,非点中就默认)

foreach 好,我喜欢foreach!

#20