隱藏/動態顯示錨點

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而你不知道無論出於何種原因，都想添加一個，您可以使用其他信息來識別正確的元素。這很容易通過一個庫，如jQuery,Prototype,YUI,Closure或any of several others這樣的庫來實現，它可以讓您使用CSS選擇器來查找有問題的錨點。如果沒有庫，您必須依賴少量受到良好支持的DOM函數或處理瀏覽器變體，這是庫幫助您避免的。

這裏是通過頁面上的錨的所有循環和基於隱藏一個的例子（live copy）其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版本的它（live copy）：

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

這裏的原型版本（live copy）：

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