SpringBoot第十篇:SpringBoot 之Thymeleaf:如何實現動態修改標籤的after僞元素的內容(無需寫js)

我想實現利用thymeleaf獲取的數據,動態設置a標籤hover動作時,after的content值

但是百度之後,都是要利用js獲取thymeleaf的靜態數據,然後在js中用$('標籤').attr();方法設置。

不過很難受,鼠標hover在a標籤的時候,總是無法獲取數據的值,後來經過調試和實驗。發現一種簡便的實現方式。

1.設置CSS的content爲attr(data),以便獲取data的值

content: attr(data);

2.直接在html標籤上用th:data=“${靜態數據}”,即可將靜態數據設置到after的content的data上,也避免了因爲相同類型的a標籤不能動態展示。

效果如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章