更改嵌入表中的选定链接的颜色

时间:2008-11-01 20:52:03

标签: hyperlink scripting html-table

我正在尝试使用类名来更改链接后的颜色,以便它保持新的颜色,但只有在选择了另一个链接之后才会更改,然后它会改回来。

我正在使用Martin Kool在this问题中发布的代码:

<html>     
<head>
<script>
  document.onclick = function(evt) {
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == "unselected") {
      el.className = "selected";
      var siblings = el.parentNode.childNodes;
      for (var i = 0, l = siblings.length; i < l; i++) {
        var sib = siblings[i];
        if (sib != el && sib.className == "selected")
          sib.className = "unselected";
      }
    }
  }
</script>
<style>
  .selected { background: #f00; }
</style>
</head>
 <body>
   <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
  </body>

在我尝试输出表格中的链接之前,它工作正常。为什么是这样?很简单,我是初学者。


没有错误,链接正在更改为“selected”类,但是当选择另一个链接时,旧链接将保留“selected”类而不是更改为“unselected”。基本上,据我所知,它的功能类似于vlink属性,这不是我想要的。

是的,链接都在不同的单元格中,您如何建议我更改代码以使其正常工作?


好的,实际上,我说得太早了。

document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
}

return false;
}

你给我的这段代码在视觉上很棒,它完全符合我的要求。然而,它使我的链接停止工作......他们改变颜色,但不链接到任何东西,然后当我删除脚本,他们工作正常。我做错了什么/我需要做些什么来改变这项工作呢?

此外,我想在我的网站中的其他位置执行相同的操作,其中链接都在一个<div>标记中,由<p>标记分隔。我怎样才能做到这一点?

3 个答案:

答案 0 :(得分:1)

你正在绕过兄弟姐妹。如果链接位于单独的<td>中,则它们不再是兄弟姐妹。

您可以循环浏览所有链接:

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        var links = document.getElementsByTagName('a');
        for (var i = links.length - 1; i >= 0; i--)
        {
            if (links[i].className == 'selected')
                links[i].className = 'unselected';
        }
        el.className = 'selected';
    }

    return false;
}

我还在函数末尾添加了一个return false;来阻止你去'#'

答案 1 :(得分:0)

是否有错误或者什么都没发生?如果您是初学者,那么第一步就是使用像Firebug这样的工具,这样您就会看到详细的错误消息,并且可以添加console.log语句来查看运行代码时发生的情况。

答案 2 :(得分:0)

“在表格中”是指将每个链接放在自己的单元格中?因为那会产生这一行:

var siblings = el.parentNode.childNodes;

无法选择单元格外的其他链接。你必须找到另一种方法来指示哪个元素是链接容器。