先上效果圖,本人前端入門,用的方法比較笨，歡迎大佬說說其他方法

想實現(xiàn)這種效果常規(guī)的加個布爾值,然后判斷布爾值是true,還是false來改變背景顏色肯定不行,如果只是針對一個就可以這樣做，但是用戶不可能只選擇一個吧,所以關鍵在于注冊事件的時機，給那一個div.options中的那一個a標簽注冊事件，而不是div.options下所有的a注冊點擊事件。給所有的a注冊事件必定出現(xiàn)問題。
html代碼

<div class="content_right"><div class="active clearfix"><span><h4>月餅禮盒</h4></span><div class="options"><a href="#">所有</a><a href="#">新年</a><a href="#">情人節(jié)</a><a href="#">兒童節(jié)</a><a href="#">勞動節(jié)</a><a href="#">母親節(jié)</a><a href="#">父親節(jié)</a><a href="#">端午節(jié)</a><a href="#">中秋節(jié)</a></div><span><h4>賀年禮盒</h4></span><div class="options"><a href="#">兒童節(jié)</a><a href="#">勞動節(jié)</a><a href="#">母親節(jié)</a><a href="#">父親節(jié)</a><a href="#">端午節(jié)</a><a href="#">中秋節(jié)</a></div><span><h4>參茸海味</h4></span><div class="options"><a href="#">兒童節(jié)</a><a href="#">勞動節(jié)</a><a href="#">母親節(jié)</a><a href="#">父親節(jié)</a><a href="#">端午節(jié)</a></div><span><h4>朱古力</h4></span><div class="options"><a href="#">兒童節(jié)</a><a href="#">勞動節(jié)</a><a href="#">母親節(jié)</a><a href="#">父親節(jié)</a><a href="#">端午節(jié)</a></div></div><div>2</div><div>3</div><div>4</div></div>

css代碼

/*內容區(qū)域右邊樣式開始*/ .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; } /*選項按鈕區(qū)域樣式開始*/ .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; } /*選項按鈕區(qū)域樣式結束*/ /*內容區(qū)域右邊樣式結束*/

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);})

總結

以上是生活随笔為你收集整理的解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。