隐藏/动态显示锚点

Question

我有一个锚标记.我想隐藏/动态显示它.由于某种原因,我不能把它放在div/span中.我该怎么做？

Answer 1

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

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

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

有几种方法可以获得该参考.例如,如果锚具有id,则可以使用getElementById:

HTML:

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

JavaScript的:

element = document.getElementById('foo');

如果锚没有ID,并且您不想因任何原因添加一个ID,则可以使用其他信息来标识正确的元素.这可以通过jQuery,Prototype,YUI,Closure或其他任何库来轻松完成,这些库将使您能够使用CSS选择器来查找相关的锚点.没有库,您必须依赖少量良好支持的DOM函数或处理浏览器变体,这是库帮助您避免的.

这是循环遍历页面上所有锚点并基于其隐藏一个锚点的示例(实时复制):href

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版本(实时拷贝):

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

这是Prototype版本(实时拷贝):

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