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

时间：2022-08-24 18:29:39
下面是我页面的其中两行代码:
                  <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!

#20

#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

标签：

相关文章