如何使空的 href="" 无法点击？

Question

我正在用 html/css 和 Liquid 构建一个主题。用户可以确定图像是否应该具有 url。这很容易实现：

<a href="{{ klant_logo.logo_url }}" target="{{ klant_logo.nieuw_tabblad }}" > <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/></a>

但是，当用户不添加 url 时，上面的代码会将其生成为 HTML，它仍然可以点击并导航到页面顶部（如 href="#">。

有没有办法（HTML，Jquery，我不知道）让 href="" 只有在括号之间有实际 url 时才可点击？

编辑：感谢您的快速回复！这就是诀窍：

{% if klant_logo.logo_url != "" %}
  <a href="{{ klant_logo.logo_url }}" target="{{ klant_logo.nieuw_tabblad }}" > <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/></a>
{% else %}
  <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/>{% endif %}

Answer 1

您可以有一个 CSS 类使某些链接不可用：

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

然后你可以这样做：

<a href="{{ klant_logo.logo_url }}" class="{{klant_logo.logo_url ? 'inactiveLink' : '' }}" />

Answer 2

更好的逻辑是检查用户输入的值是空白还是空值。

您也可以参考：jQuery hyperlinks - href value?