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

I'm trying to use class names to change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it will change back.

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

I'm using this code that was posted by Martin Kool in this question:

我正在使用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>

It works fine until I try to out the links in a table. Why is this? Be easy, I'm a beginner.

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

There is no error, the links are changing to the "selected" class, but when another link is selected, the old links are keeping the "selected" class instead of changing to "unselected". Basically, as far as I can tell, it's functioning like a vlink attribute, which is not what I'm going for.

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

And yes, the links are all in different cells, how would you suggest I change the code so that it works correctly?

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

OK, actually, I spoke too soon.

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

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

This code you gave me works great, visually, it does exactly what I want it to do. However, It makes my links stop working... They change color, but dont link to anything, and then when I remove the script, they work fine. What am I doing wrong/what do I have to change to make this work?

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

Also, I want to do the same thing somewhere else in my website, where the links are all in one <div> tag, separated by <p> tags. How can I make this work?

此外,我想在我的网站的其他地方做同样的事情,其中链接都在一个

标签中,由

标签分隔。我怎样才能做到这一点?

3 个解决方案

#1

You're looping through the siblings. If the links are in separate <td>'s then they're no longer siblings.

你正在经历兄弟姐妹。如果链接在单独的中,则它们不再是兄弟姐妹。

You can loop through all the links like this:

您可以遍历所有链接,如下所示:

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

I've also added a return false; at the end of the function to stop you going to '#'

我还添加了一个返回false;在函数结束时阻止你去'#'

#2

Is there an error or is there just nothing happening? A good first step if you are a javascript beginner is to use a tool like Firebug so you see detailed error messages, and you can add in console.log statements to see what's going on while you run your code.

有错误还是什么都没发生?如果你是一个初学者,那么第一步就是使用像Firebug这样的工具,这样你就可以看到详细的错误信息了,你可以添加console.log语句来查看运行代码时发生了什么。

#3

By ‘in tables’ do you mean putting each link in its own cell? Because that would make this line:

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

var siblings = el.parentNode.childNodes;

fail to select other links outside of the cell. You'd have to find another way to signal which element is the link container.

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

#1