代码之家 › 专栏 › 技术社区 › Jeff

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

html-table scripting hyperlink

Jeff · 技术社区 · 17 年前

我正在尝试使用类名在选择链接后更改其颜色,这样它将保持新的颜色,但仅在选择另一个链接之前,然后它将更改回原来的颜色。

我用的是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>

没有错误,链接正在更改为“选定”类,但当选择另一个链接时,旧链接将保留“选定”类,而不是更改为“未选定”。基本上,据我所知,它的功能就像一个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 回复 | 直到 9 年前

Greg 17 年前

你在兄弟姐妹之间循环。如果链接位于单独的 <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; 在函数的末尾,停止您转到“#”

lacker 17 年前

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

bobince 17 年前

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

var siblings = el.parentNode.childNodes;

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

w113msh · 提取未设置脚本的变量名

2 年前

deep · 分析csv文件以将详细信息添加到xml文件

2 年前

c0d3rbox · 如何在Python脚本中加载yaml文件?

2 年前

user1870776 · 是否可以编写Windows 11声音和显示设置的脚本?[已关闭]

2 年前

Clay Reakes · VBA粘贴特殊xlPasteValue仍使用格式粘贴

2 年前

NetworkingMania1990 · Powershell脚本中的Sytem.Object[]显示错误

2 年前

Delta George · 为什么以“=”开头的令牌会更改zsh中命令的语义?

2 年前

notacorn · 为什么在bash中“if[false]”的值为true,而“if false”的值不为true?

2 年前

Community wiki · Bash脚本创建到共享库的符号链接

2 年前