解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果

先上效果图,本人前端入门,用的方法比较笨，欢迎大佬说说其他方法

想实现这种效果常规的加个布尔值,然后判断布尔值是true,还是false来改变背景颜色肯定不行,如果只是针对一个就可以这样做，但是用户不可能只选择一个吧,所以关键在于注册事件的时机，给那一个div.options中的那一个a标签注册事件，而不是div.options下所有的a注册点击事件。给所有的a注册事件必定出现问题。
html代码

 <div class="content_right"><div class="active clearfix"><span><h4>月饼礼盒</h4></span><div class="options"><a href="#">所有</a><a href="#">新年</a><a href="#">情人节</a><a href="#">儿童节</a><a href="#">劳动节</a><a href="#">母亲节</a><a href="#">父亲节</a><a href="#">端午节</a><a href="#">中秋节</a></div><span><h4>贺年礼盒</h4></span><div class="options"><a href="#">儿童节</a><a href="#">劳动节</a><a href="#">母亲节</a><a href="#">父亲节</a><a href="#">端午节</a><a href="#">中秋节</a></div><span><h4>参茸海味</h4></span><div class="options"><a href="#">儿童节</a><a href="#">劳动节</a><a href="#">母亲节</a><a href="#">父亲节</a><a href="#">端午节</a></div><span><h4>朱古力</h4></span><div class="options"><a href="#">儿童节</a><a href="#">劳动节</a><a href="#">母亲节</a><a href="#">父亲节</a><a href="#">端午节</a></div></div><div>2</div><div>3</div><div>4</div></div>

css代码

/*内容区域右边样式开始*/
.content>.content_right{width:100%;height:100%;padding-left:95px;background:#fff;
}
.content>.content_right>div{display: none;
}
.content>.content_right>.active{display: block;
}
.content>.content_right>div>span{position: relative;display: block;width:85%;top:50px;margin:0 auto;border:1px solid rgb(247,247,247);
}
.content>.content_right h4{position: absolute;margin:0 auto;width:100px;top:-7px;left:22%;background:#fff;font-size: 18px;font-weight: bold;text-align: center;
}
/*选项按钮区域样式开始*/
.content>.content_right .options{margin-top:60px;padding-left:10px;
}
.content>.content_right .options>a{display: inline-block;width:31.3%;height:50px;font-size: 16px;text-align: center;line-height: 50px;background:rgb(247,247,247);border-radius: 5px;padding:0 10px;margin-top:12px;
}
.content>.content_right .options>a:last-child{margin-right: 0px;
}
/*选项按钮区域样式结束*/
/*内容区域右边样式结束*/

js代码

 /*点击选项变红*/function red(i,count){var $start = true;$(".content>.content_right .options:nth-of-type("+i+")>a:nth-of-type("+count+")").on("click",function(){if($start == true){$(this).css("color","white").css("background","rgb(195,13,35)");$(this).attr("href","javascript:void(0)");$start = false;}else{$(this).css("color","black").css("background","rgb(247,247,247)");$(this).attr("href","javascript:void(0)");$start = true;}        })}$(".content>.content_right .options:nth-of-type(1)>a").each(function(){$i = $(this).index() + 1;red(1,$i);})$(".content>.content_right .options:nth-of-type(2)>a").each(function(){$i = $(this).index() + 1;red(2,$i);})$(".content>.content_right .options:nth-of-type(3)>a").each(function(){$i = $(this).index() + 1;red(3,$i);})$(".content>.content_right .options:nth-of-type(4)>a").each(function(){$i = $(this).index() + 1;red(4,$i);})

解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果相关推荐

js手动触发页面元素点击事件，程序触发，自定义点击事件模拟点击
页面有时候的使用场景需要手动控制某个元素响应点击事件,可以达到不直接点击元素来响应事件,这里可以使用element.dispatchEvent(),在使用element.dispatchEvent() ...
关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...
U盘计算机打开文件夹变红,本地磁盘c盘变红的解决方法
本地磁盘c盘变红的解决方法发布时间:2020-12-15 11:52:19 来源:亿速云阅读:148 作者:小新这篇文章主要介绍本地磁盘c盘变红的解决方法,文中介绍的非常详细,具有一定的参考价值 ...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
java的按钮点击事件_[转载]java处理按钮点击事件
不同的事件源可以产生不同类别的事件.例如,按钮可以发送一个ActionEvent对象,而窗口可以发送WindowEvent对象. AWT时间处理机制的概要: 1.监听器对象是一个实现了特定监听器接口( ...
php 高德地图点击事件,javascript - 高德地图marker动态绑定点击问题
javascript - 高德地图marker动态绑定点击问题 PHP中文网2017-04-11 12:37:51 0 2 282 我把代码整理在同一个页面了,信息窗口里面的红色详情两字点击的 ...
Win11C盘变红怎么办？Win11C盘变红的清理方法
很多小伙伴在使用电脑时候经常会感觉到自己没有下载什么东西C盘就会莫名的满了变红,哪怕升级到Win11系统也不例外,因为C盘是系统盘,所以这会严重的影响系统的运行速度,那么我们应该怎么办呢?下面就和小编 ...
html页面设置不可点击事件,css怎么设置div不可点击？
这篇文章介绍的是通过纯CSS实现禁止div的鼠标点击事件,比起Javascript来更加灵活,有需要的可以参考学习. css怎么设置div不可点击? JavaScript有一个preventDefau ...
vue中设置子组件的点击事件不影响父组件的点击事件
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 今天分享个技术块儿. 在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击c ...
jquery 监听td点击事件_安卓开发监听点击事件的一种方法
本人是菜鸟一只,学习安卓纯属兴趣.没有真正上过编程课程,所有知识都是在网上获取的.今天分享的是监听点击事件的一个方法,这个方法的好处是代码较简洁. 如图,点击保存时,把上面的数据入库. 实现如下: 在 ...

解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果

解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果相关推荐

最新文章

热门文章