jquery 点击按钮,多选同一按钮第一次点击高亮第二次取消高亮，和单选实现点击后当前背景高亮效果其余正常

ゝ一世哀愁。 2024-04-19 15:37 92阅读 0赞

jquery代码

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script>
        $(function () {
        //实现点击后标记当前菜单位置(背景高亮菜单)效果其余正常
            var cotrs = $(".appraise span");
            cotrs.click(function () {
            //当前高亮，其余正常
                $(this).addClass("on").siblings().removeClass("on");
            });
            //第一次点击高亮第二次取消高亮
            var cotrs1 = $(".impression span").val(1);
            var f = false;
            cotrs1.click(function () {
                if (f = !f) {
                    $(this).removeClass("on").siblings();
                } else {
                    $(this).addClass("on").siblings();
                }
            });
    
        });
    </script>

html 部分代码

<div class="item_con appraise">
                                <span class="on">
                      <img src="" alt="">
                      <i>推荐</i>
                    </span>
                                <span>
                      <img src="" alt="">
                      <i>一般</i>
                                </span>
                                <span>
                      <img src="" alt="">
                      <i>不推荐</i>
                                </span>
                            </div>
                        </div>
                        <div class="item">
                            <h3>* 平台印象</h3>
                            <div class="item_con impression">
                                <span>零费用</span>
                                <span>老板牛</span>
                                <span class="on">提现快</span>
                                <span>无语</span>
                                <span>还算明度</span>
                                <span>还不错</span>
                                <div class="add">
                                    <input type="text" name="" value="" placeholder="+ 添加自定义印象">
                                    <i>＋</i>
                                </div>
                            </div>
                        </div>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2c0ace7e88574ef8a3d0d1b54ae057c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ab5d1e83710344e780ecb7d1d9f0125b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 点击按钮,多选同一按钮第一次点击高亮第二次取消高亮，和单选实现点击后当前背景高亮效果其余正常

query代码 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> ...

ゝ一世哀愁。/ 2024年04月19日 15:37/ 0 赞/ 93 阅读

相关 echart柱图点击高亮问题

echarts柱图点击高亮问题在建立echarts柱图时，都会有一个默认的点击高亮效果，有时候想取消高亮，有如下方法： > slient(默认为’false

淩亂°似流年/ 2023年03月05日 12:43/ 0 赞/ 17 阅读

相关 vue选中或点击输入框，边框高亮；vue选中或点击元素，当前元素背景高亮

1、vue 选中或点击输入框，边框高亮 ①：输入框动态绑定一个class，例`login-box-focus`，如下： :class="{ 'login-box-f

水深无声/ 2022年10月28日 03:43/ 0 赞/ 559 阅读

相关 JointJS点击选中元素高亮显示

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。官方文档相关部分： [highl

心已赠人/ 2022年08月31日 12:23/ 0 赞/ 258 阅读

相关 vue结合Echarts实现点击高亮效果

vue结合Echarts实现点击高亮效果本文主要介绍如何在vue中使用Echarts实现点击高亮效果。 1、首先看一下官方网站上的介绍： http://echart

野性酷女/ 2022年06月05日 12:27/ 0 赞/ 612 阅读

相关 iOS UIView点击高亮效果

模范UIbuton的高亮效果，代码如下： ViewClickEffect.h import <UIKit/UIKit.h> @interface

骑猪看日落/ 2022年06月05日 03:43/ 0 赞/ 436 阅读

相关 vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...

vue样式高亮使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目 vue create 'project-name' cnpm

╰+哭是因爲堅強的太久メ/ 2022年03月12日 07:40/ 0 赞/ 689 阅读

相关 vue循环与判断(点击高亮)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXh

不念不忘少年蓝@/ 2022年02月14日 02:23/ 0 赞/ 450 阅读

相关 jQuery实现radio第一次点击选中第二次点击取消

项目开发需要，直接贴代码在JavaScript中，即可实现对于页面所有的radio实现： // jquery $('input:radio').click

绝地灬酷狼/ 2021年12月23日 16:39/ 0 赞/ 387 阅读

相关 Android:实现按钮点击后高亮的效果

未点击前: ![20190804102024339.png][] 点击后: ![20190804102349562.png][] 可以看出点击后，颜色变得更加高亮了(你

àì夳堔傛蜴生んèń/ 2021年11月11日 03:56/ 0 赞/ 938 阅读