[英]Make image clickable based on certain condition in Thymeleaf
i am gettting an attribute html "image_clickable_status " , if it is true , i need to make the image clickable and if it is false the image should not be clickable. 我正在获取html“ image_clickable_status”属性,如果为true,则需要使图像可单击,如果为false,则图像不应单击。 Below is what i am trying to do 以下是我正在尝试做的
<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>
But this is not working , any ideas how to handle this situation in a better way. 但这是行不通的,任何想法如何更好地处理这种情况。
You could use pointer-events: none;
您可以使用pointer-events: none;
. 。
eg 例如
<a th:style="${image_clickable_status} ? '' : 'pointer-events: none;'"
th:href="@{/getConsent/yes}">
<img src="https://samplegoogle.img" alt="viu"/>
</a>
You might want to use if-else
statement to distinguish a link from a paragraph: 您可能要使用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>
The solution above is a bit verbose. 上面的解决方案有点冗长。 Alternatively, use the style to make the link not-clickable and a cursor pointer default. 或者,使用样式使链接不可单击,并使光标指针为默认值。
<a th:style="${image_clickable_status} ? '' : " +
"'pointer-events: none; cursor: default;'"
th:href="@{/getConsent/yes}">
<img src="https://samplegoogle.img" alt="viu"/>
</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.