为何点击<a>元素后颜色会恢复为默认值？jQuery点击变色异常问题

嘿，这个问题我之前也碰到过！核心原因其实很简单：a标签的默认行为是页面导航，哪怕你的href属性是空的，浏览器点击后还是会触发刷新页面的操作——这就导致你刚设置的黄色样式，在页面重新加载后又被重置回默认状态了，而h1元素没有这种默认跳转行为，所以样式能正常保留。

给你两个简单的解决方案：

方案一：阻止a标签的默认跳转行为（推荐） #

在你的jQuery点击事件里，添加e.preventDefault()来阻止浏览器的默认导航动作，这样页面就不会刷新，样式也能保持住：

var containerUp = $('.upperside-shit'); 
var buttons = containerUp.find("a"); 
var nadpis = containerUp.find("h1") 
console.log(buttons.length); 
buttons.click(function(e) { 
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    $(this).css("color", "yellow"); 
}); 
nadpis.click(function() { 
    $(this).css("color", "yellow"); 
})

方案二：修改a标签的href属性 #

如果你的a标签本来就不需要跳转功能，可以把href改成javascript:void(0)，这样也能避免页面刷新：

<li><a href="javascript:void(0)">Woman</a></li>
<li><a href="javascript:void(0)">Men</a></li>
<li><a href="javascript:void(0)">Children</a></li>
<!-- 其他a标签同理 -->

两种方法都能解决你遇到的“闪一下就恢复”的问题，方案一更灵活，万一之后你需要给a标签加跳转逻辑，只需要去掉e.preventDefault()或者加条件判断就行~

内容的提问来源于stack exchange，提问作者milderengen