1

我试图在选择链接后使用类名来更改链接的颜色，以便它将保持新颜色，但仅在选择另一个链接之前，它会变回来。

我正在使用 Martin Kool 在这个问题中发布的代码：

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

在我尝试找出表格中的链接之前，它工作正常。为什么是这样？轻松一点，我是初学者。

没有错误，链接正在更改为“选定的”类，但选择另一个链接时，旧链接正在保留“所选”类，而不是更改为“未选择”。基本上，据我所知，它的功能就像一个 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>标签分隔。我怎样才能使这项工作？

4

3 回答 3

1

您正在遍历兄弟姐妹。如果链接位于单独<td>的 's 中，则它们不再是兄弟姐妹。

您可以像这样遍历所有链接：

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;函数末尾添加了一个来阻止你去'#'

于 2008-11-01T21:33:03.437 回答
0

是有错误还是什么也没发生？如果您是 javascript 初学者，第一步是使用 Firebug 之类的工具，以便查看详细的错误消息，并且可以添加 console.log 语句以查看运行代码时发生的情况。

于 2008-11-01T21:04:49.720 回答
0

“在表格中”是指将每个链接放在自己的单元格中吗？因为那会使这条线：

var siblings = el.parentNode.childNodes;

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

于 2008-11-01T21:09:01.457 回答