首页 > 解决方案 > 根据 Thymeleaf 中的特定条件使图像可点击

问题描述

我正在获取一个属性 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=“#”&gt;
<img 

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

 </div>

但这不起作用,任何想法如何以更好的方式处理这种情况。

标签: javaspringthymeleaf

解决方案


您可能希望使用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>

推荐阅读