在一个html页面中有多个a标签如何让点击后的a标签变成黄色并且可以记住在用户刷新后还是黄色?
可以通过JavaScript来实现点击后的a标签变成黄色,并且在用户刷新后仍然保持黄色的效果。以下是一种实现方式:
- 首先,在HTML页面中给每个a标签添加一个唯一的id属性,例如:
<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 3</a>
- 使用CSS为被点击的a标签添加黄色背景色样式,例如:
.yellow {
background-color: yellow;
}
- 在JavaScript中,使用localStorage来存储被点击的a标签的id。当页面加载时,检查localStorage中是否有存储的id,如果有,则为对应的a标签添加黄色样式。当用户点击a标签时,将被点击的a标签的id存储到localStorage中,并为其添加黄色样式。代码如下:
// 页面加载时检查localStorage
document.addEventListener("DOMContentLoaded", function() {
var clickedLinkId = localStorage.getItem("clickedLinkId");
if (clickedLinkId) {
var clickedLink = document.getElementById(clickedLinkId);
clickedLink.classList.add("yellow");
}
});
// 点击a标签时添加黄色样式,并存储id到localStorage
document.addEventListener("click", function(event) {
if (event.target.tagName === "A") {
var clickedLink = event.target;
clickedLink.classList.add("yellow");
localStorage.setItem("clickedLinkId", clickedLink.id);
}
});
这样,当用户点击一个a标签时,该a标签会变成黄色,并且该id会被存储到localStorage中。当用户刷新页面后,会根据localStorage中存储的id来为相应的a标签添加黄色样式
原文地址: http://www.cveoy.top/t/topic/hT9Z 著作权归作者所有。请勿转载和采集!