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

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

想实现这种效果常规的加个布尔值,然后判断布尔值是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);
    })