Question

基本上，我想做与此相反的事：how do i hide anchor text without hiding the anchor

我希望能够在我的页面上有一个链接，在客户端确定的某些条件下，该链接可以取消激活链接，但仍然显示文本。有没有办法做到这一点，没有两个单独的元素（一个同时具有锚和文本，一个只有文本），然后翻转两者之间的可见性？

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

Answer 1

将<a>替换为通用<span>，然后再将其替换。

一个简单的替换策略是：

找到节点。
在其之前添加替换节点
删除第一个节点

-

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标记上就是示例条件。
示例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');

Fiddle

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; 
 }

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

6 个答案: