javascript - 动态隐藏/显示 anchor

Question

我有一个 anchor 标记。我想动态隐藏/显示它。由于某种原因，我无法将其放入 div/span 内。我该怎么做？

Answer 1

一旦您获得了 anchor 标记的 DOM 元素的引用，请执行以下操作:

// Hide
element.style.display = "none";

// Show again
element.style.display = "";

您可以通过多种方式获得该引用。例如，如果 anchor 有一个 id，您可以使用 getElementById:

HTML:

<a href='whatever' id='foo'>Whatever</a>

JavaScript:

element = document.getElementById('foo');

如果 anchor 没有 ID，并且您出于某种原因不想添加 ID，则可以使用有关它的其他信息来识别正确的元素。使用像 jQuery 这样的库最容易做到这一点。 , Prototype , YUI , Closure ，或any of several others这将使您能够使用 CSS 选择器来查找有问题的 anchor 。如果没有库，您就必须依赖少量支持良好的 DOM 函数或处理浏览器变化，而这些正是库可以帮助您避免的。

下面是一个循环遍历页面上所有 anchor 并根据其href隐藏 anchor 的示例 ( live copy ):

HTML:

<a href='http://stackoverflow.com'>StackOverflow</a>
<a href='http://superuser.com'>SuperUser</a>
<a href='http://serverfault.com'>ServerFault</a>

JavaScript:

var links, index, link;

links = document.getElementsByTagName('a');
for (index = 0; index < links.length; ++index) {
  link = links[index];
  if (link.href.indexOf('superuser') >= 0) {
    link.style.display = "none";
    break;
  }
}

如果您使用库，这会变得更加容易。例如，这是它的 jQuery 版本 ( live copy ):

$('a[href*=superuser]').hide();

这是原型(prototype)版本 ( live copy ):

$$('a[href*=superuser]').invoke('hide');