时间戳

首页 > 解决方案 > 如何禁用或启用 href 链接并更改其内容？

javascript - 如何禁用或启用 href 链接并更改其内容？

问题描述

我的代码中有一个错误要修复

  if (!creatorUrl) {
        creatorUrl = '#';
      }

基本上上面的代码所做的是，它检查创建者是否有一个我可以将用户重定向到的 URL，否则我不想做任何事情。

  <p class="vocab paragraph inherit-colored info__content info__content-creator">
                <a href="creator_url">Creator Name</a>
              </p>

这是我正在修改的标签。我希望预期的行为就像，当 creatorUrl 不存在时，链接根本不应该出现，并且创建者名称应该是纯文本。我该怎么做？

标签： javascripthtmlnode.jsdebugging

解决方案

在服务器端，不显示链接将是一个明显的地方

EJS

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <% if (creatorUrl) { %>
    <a href="<%= creatorUrl %>">Creator Name</a>
  <% } else { %>
    Creator Name
  <% } %>
</p>

在客户端，您可以这样做以用其 textContent 替换空链接

window.addEventListener("load",function() {
  [...document.querySelectorAll(".info__content-creator a[href^='#']")].forEach(lnk => lnk.parentNode.replaceChild(document.createTextNode(lnk.textContent), lnk));
})
<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <a href="#">Creator Name</a>
</p>

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <a href="createorpage.html">Creator Name</a>
</p>

推荐阅读