javascript - 隐藏锚点，但不隐藏锚文本

Question

基本上，我想做与此相反的事情：如何隐藏锚文本而不隐藏锚

我希望能够在我的页面上有一个链接，该链接在一组客户端确定的条件下能够停用链接，但仍显示文本。有没有办法做到这一点而无需两个单独的元素（一个带有锚点和文本，一个只带有文本）然后在两者之间翻转可见性？

编辑：对不起，应该澄清。我希望链接在停用时不要像链接一样设置样式。

Answer 1

将 替换<a>为 generic <span>，然后再返回。

一个简单的替换策略是：

1. 找到节点。
2. 在它之前添加被替换的节点
3. 删除第一个节点

--

var node = document.getElementById("example");
var new_node = document.createElement("a"); // or "span"
new_node.innerText = text;
node.parentNode.insertBefore(new_node, node);
node.parentNode.removeChild(node);

这段代码并不完整，只是为了给你一个想法。

Answer 2

满足条件时，您可以删除 href 属性。
检查这个例子。
HTML

<a href="http://google.com"> Link to google</a>
<p> Hover over me to remove the link from the anchor</p>

Javascript（使用 jquery）

$("p").on("mouseover", function(){
   $("a").removeAttr("href"); 
});

当您将鼠标悬停在段落标签上时，href 将被删除，但如果您从未将鼠标悬停在它上面，您可以访问 google.com，将鼠标悬停在 p 标签上就是示例条件。
Example Fiddle

这将从锚标记中永久删除 href。当满足另一个条件时，您必须将其添加回来。

Answer 3

最简洁的答案是不。任何隐藏或不可见的元素也会隐藏它的子元素。您可能会发现在需要时简单地修改锚标记的属性更容易。

热点链接：

<a href="#some-url-here" class="">Text here</a>

非热链接

<a class="no-link" data-url="#some-url-here">Text here</a>

您可以使用 JavaScript 删除href属性、存储其值并添加可用于覆盖任何样式的类。

Answer 4

您所问的问题没有直接的“正确”答案，因为有太多方法可以达到类似的效果。如果您需要根据条件禁用和重新启用锚点，我认为这个答案是最简单的方法之一。

您可以添加一个单击处理程序，例如.on('click.disabledLink', false)停用锚功能（防止默认并停止传播），然后使用一个使其看起来像页面中的普通文本的类来设置它的样式。

要重新启用它，您只需要off处理程序并删除添加的类。

//disable link
$('a').on('click.disabledLink', false).addClass('disabledLink');
//re-enable link
$('a').off('.disabledLink').removeClass('disabledLink');

小提琴

Answer 5

在 Firefox 和 WebKit 浏览器中，您可以使用pointer-events: none;使元素对指针“透明”（在功能意义上，而不是视觉意义上！）。你真正点击的是下面的元素。有关演示，请参见http://jsfiddle.net/Hqk49/。
请注意，它仅在启用 CSS（和 JS，以便切换类以恢复链接的正常行为）时才有效。IE9 不支持，也许 IE10 不支持，Opera 不支持：https ://developer.mozilla.org/fr/docs/CSS/pointer-events

Answer 6

参考下面的CSS：

a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }