JQ的点击按钮变色事件

最新推荐文章于 2024-02-25 15:10:29 发布

朱跑跑

最新推荐文章于 2024-02-25 15:10:29 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/q5820259/article/details/89703853

版权

2019/4/29 雨

就是一个手机端充值页面的一个选择按钮，点击当前按钮变颜色，开始是用css的hover鼠标移动效果写，后面发现不行，焦点消失后样式也就掉了，后面就想着用js写一个，但js不会写，只会一点jq。

html代码部分：

关键字：jia//要加上去的样式

jian//原样式

qian//就是钱的拼音，只为更直观


<head>
    <style>
    .jia{
        border:2px solid #2095ECFF;
		color: #2095ECFF;
    }
    div{
        box-shadow: 0px 1px 10px 0px rgba(171,171,171,0.29);
        border-radius: 10px;
        background: #fff;
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }
    .qian{
        background: #fff;
        border-radius: 10px;
        overflow: auto;
    }
    .qian li{
        text-align: center;
        width: 28%;
        height: 35px;
        line-height: 35px;
        border-radius: 10px;
        float: left;
        margin: 2% 2% 2% 2%;
        border:2px solid #2095ECFF;
		color: #2095ECFF;
    }
    </style>
</head>
<body>
<div>
    <ul class="qian">
        <li class="jian">100</li>
        <li class="jian">200</li>
        <li class="jian">500</li>
        <li class="jian">1000</li>
        <li class="jian">2000</li>
        <li class="jian">5000</li>
    </ul>
</div>
</body>

jq代码部分：

$("#qian li").click(function(){
	$(this).removeClass("jian");
	$(this).siblings("li").removeClass("jia");
	$(this).siblings("li").addClass("jian");
	$(this).addClass("jia");
}

然后结果我发现当我点击那个li的时候，.jia确实在html代码里面加上去了，但是样式并没生效，然后我把原样式里面的这两部分去掉后就行了。实际项目中所有样式是外链引用的css，只有jia和jian是卸载html里面的。

这算是一个前端的优先级问题吗？？？外链css文件的样式会优先于jq加上去的样式

朱跑跑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JQ的点击按钮变色事件

2019/4/29 雨就是一个手机端充值页面的一个选择按钮，点击当前按钮变颜色，开始是用css的hover鼠标移动效果写，后面发现不行，焦点消失后样式也就掉了，后面就想着用js写一个，但js不会写，只会一点jq。html代码部分：关键字：jia//要加上去的样式 jian//原样式 qian//就是钱的拼音，只为更直观...
复制链接

扫一扫