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

本文介绍了更改嵌入表中的选定链接的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

我正在使用Martin Kool在问题：

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

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

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

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.

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

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?

另外，我想在我网站的其他地方做同样的事情，其中的链接全部在一个< div> 标记中，由< p> 标记分隔。我怎样才能使这个工作？

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?

推荐答案

你正在经历兄弟姐妹。如果链接位于单独的< td> 中，则他们不再是兄弟姐妹。

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

我还添加了返回false; 在函数结束时停止转到'＃'

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

这篇关于更改嵌入表中的选定链接的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！