Question

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

<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?

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

2 个答案: