根据Thymeleaf中的特定条件使图像可点击

Question

我正在获取html“ image_clickable_status”属性，如果为true，则需要使图像可单击，如果为false，则图像不应单击。 以下是我正在尝试做的

<div th:switch=${image_clickable_status}>

 <a th:case=“true ” th:href="@{/getConsent/yes}">
<a th:case=“false ” th:href=“#”>
<img 

 src="https://samplegoogle.img" alt="viu"/>
</a>
 </a>

 </div>

但这是行不通的，任何想法如何更好地处理这种情况。

Answer 1

您可以使用pointer-events: none; 。

例如

<a th:style="${image_clickable_status} ? '' : 'pointer-events: none;'" 
   th:href="@{/getConsent/yes}">
    <img src="https://samplegoogle.img" alt="viu"/>
</a>

Answer 2

您可能要使用if-else语句来区分段落中的链接：

<div th:if="${image_clickable_status}">
    <a th:case=“true ” th:href="@{/getConsent/yes}">
        <img  src="https://samplegoogle.img" alt="viu"/>
    </a>
</div>
<div th:unless="${image_clickable_status}">
    <img  src="https://samplegoogle.img" alt="viu"/>
</div>

上面的解决方案有点冗长。 或者，使用样式使链接不可单击，并使光标指针为默认值。

<a th:style="${image_clickable_status} ? '' : " + 
            "'pointer-events: none; cursor: default;'" 
   th:href="@{/getConsent/yes}">

    <img src="https://samplegoogle.img" alt="viu"/>
</a>