如何实现【点击A标签使其改变颜色】

<lable id="lable1" onclick="col(1)">1</lable>
<lable id="lable2" onclick="col(2)">2</lable>
<lable id="lable3" onclick="col(3)">3</lable>
<script language="javascript">
function col(num)
{
for(i=1;i<6;i++)
{
  if(i==num)
    document.getElementById("lable"+i).backgroudcolor=Red;
  else
    document.getElementById("lable"+i).backgroudcolor=Black;
}
}
</script>可能有问题啊，自己再改改

解决方案 »

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

谢谢LZ的大哥，可是我现在每个A标签都已经有点击事件了，不知道要怎么弄
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var a=document.links;
for(var i=0;i<a.length;i++){
a[i].style.color="black";
a[i].onclick=change;
}
}
function change(){
var a=document.links;
for(var i=0;i<a.length;i++){
a[i].style.color="black";
a[i].onclick=change;
}
this.style.color="red";
}
window.onload=init;
</script>
</head><body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</body>
</html>
这样试试
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var a=document.links;
for(var i=0;i<a.length;i++){
a[i].style.color="black";
a[i].onclick=change;
}
}
function change(){
var a=document.links;
for(var i=0;i<a.length;i++){
a[i].style.color="black";
}
this.style.color="red";
shows(this);
}
function shows(a){
alert(a.href);
}
window.onload=init;
</script>
</head><body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</body>
</html>
额  把已有的事件放进change里试试或者addEventListener和attachEvent
超链接样式应该就可以完成你所说的吧？a       /****原本样式****/
{

}
a:link{ /* 超链接正常状态下的样式 */
color:Red; /* 红色 */
text-decoration:none; /* 无下划线 */
}
a:visited{ /* 访问过的超链接 */
color:#000000; /* 黑色 */
text-decoration:none; /* 无下划线 */
}
a:hover{ /* 鼠标经过时的超链接 */
color:#FFFF00; /* 黄色 */
text-decoration:underline; /* 下划线 */
}你可以用JS 调用 CSS的CLASS  来变化不用颜色
<a name="ca" onclick="setClass1(this);">A1</a>
<a name="ca" onclick="setClass1(this);">A2</a>
<a name="ca" onclick="setClass1(this);">A3</a><script type="text/javascript">
            function setClass1(obj) {
                clearClass();
                obj.style.color = "red";
            }
            function clearClass() {
                var aList = document.getElementsByName("ca");
                for (var i = 0, len = aList.length; i < len; i++) {
                    aList[i].removeAttribute("style");
                }
            }
        </script>
  <a id="a" href="#">1</a>
  <a id="b" href="#">2</a>
  <a id="c" href="#">3</a>
  <a id="d" href="#">4</a>
  <a id="e" href="#">5</a>
        var a = document.getElementById("a");
a.onclick=function(){
this.style.color="red";
}
var b = document.getElementById("b");
b.onclick=function(){
a.style.color="blue";
}
没看清题目，我用了是最笨的办法，JS要在HTML的下面，不然无效，原因就不多说，都懂的  <a id="a" href="#">1</a>
  <a id="b" href="#">2</a>
  <a id="c" href="#">3</a>
  <a id="d" href="#">4</a>
  <a id="e" href="#">5</a>
        var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
var e = document.getElementById("e");
a.onclick=function(){
this.style.color="red";
b.style.color="blue";
c.style.color="blue";
d.style.color="blue";
e.style.color="blue";
}
b.onclick=function(){
this.style.color="red";
a.style.color="blue";
c.style.color="blue";
d.style.color="blue";
e.style.color="blue";
}
c.onclick=function(){
this.style.color="red";
a.style.color="blue";
b.style.color="blue";
d.style.color="blue";
e.style.color="blue";
}
d.onclick=function(){
this.style.color="red";
a.style.color="blue";
b.style.color="blue";
c.style.color="blue";
e.style.color="blue";
}
e.onclick=function(){
this.style.color="red";
a.style.color="blue";
b.style.color="blue";
c.style.color="blue";
d.style.color="blue";
}
onclick="getChange(this)"function getChange(obj) {
  var Par=obj.parentNode;
  for(i=0;i<Par.childNodes.length;i++){Par.childNodes[i].className="black";}
  obj.className="red";

  }
8L的大哥和我用的方式差不多

$('#gj').removeClass("wrappedElement_w");
$('#gj').removeAttr('style');//本身是白色的
$('#gj').addClass("wrappedElement");//添加红色
$('#sb').addClass("wrappedElement_w");//其他的添加白色
$('#qt').addClass("wrappedElement_w");//同上我在3个A标签的onclick事件里写的这些，3个还可以  但我另一个页面有6个连接，那代码量就太大了，所以想找个方便的方法
感谢LS的几位大哥的指导，小弟将6个超链接的onclick事件里都添加了类似LS的方法，代码量不少，但能实现功能，希望大哥们帮小弟想想，简单的，用JQUERY这种方法实现这个功能，谢谢大哥们了
<a name="ca" onclick="setClass1(this);">A1</a>
<a name="ca" onclick="setClass1(this);">A2</a>
<a name="ca" onclick="setClass1(this);">A3</a>
<script type="text/javascript">
            function setClass1(obj) {
                clearClass();
                $(obj).addClass("bg_color");
            }
            function clearClass() {
                $("a[name='ca']").each(function () {
                    $(this).removeClass("bg_color");
                });
            }
        </script>
<a>A1</a>
<a>A2</a>
<a>A3</a>
<script type="text/javascript">
//如下代码也是可以的，建议给a标签加标识，否侧页面a标签多，就不容易控制了
            $("a").click(function () {
                clearClass();
                $(this).addClass("bg_color");
            });
            function clearClass() {
                $("a").each(function () {
                    $(this).removeClass("bg_color");
                });
            }
        </script>
<style type="text/css">
        .bg_color
        {
            cursor:pointer;
            color:Red;
        }
</style>