如何让点击后的a标签变成黄色并且可以记住在用户刷新后还是黄色?
要实现点击后的a标签变成黄色,并且可以记住,在用户刷新后还是黄色,可以使用JavaScript和localStorage来实现。
首先,在CSS中定义一个黄色的样式:
.yellow {
color: yellow;
}
然后,在HTML中设置a标签,并为其添加一个id属性:
<a id="myLink" href="#">点击我</a>
接下来,使用JavaScript来实现点击后变成黄色,并将状态保存到localStorage中。在页面加载时,检查localStorage中是否存在保存的状态,如果存在,则将a标签的样式设置为黄色:
// 获取a标签元素
var myLink = document.getElementById('myLink');
// 检查localStorage中是否存在保存的状态
if (localStorage.getItem('linkColor') === 'yellow') {
myLink.classList.add('yellow');
}
// 添加点击事件监听器
myLink.addEventListener('click', function() {
// 给a标签添加黄色样式
myLink.classList.add('yellow');
// 将状态保存到localStorage中
localStorage.setItem('linkColor', 'yellow');
});
这样,当用户点击a标签后,a标签就会变成黄色,并且状态会被保存到localStorage中。在用户刷新页面后,JavaScript会检查localStorage中的状态,如果存在保存的状态为黄色,则将a标签的样式设置为黄色,实现了点击后的a标签变成黄色,并且在用户刷新后还是黄色的效果
原文地址: http://www.cveoy.top/t/topic/hT9O 著作权归作者所有。请勿转载和采集!