标签切换选中样式

实现标签切换选中背景凸出来的效果，先上效果图：

页面代码：

<div style="width: 30%; height: 70px; position: absolute; top: 0; right: 0;">
            <div id="btn_All" class="main-element main-element-selected" style="cursor: pointer; width: calc(25% + 6px); height: 100%; float: left; text-align: center; display: inline-block; position: relative;" >
                <img class="state-img" src="/Images/New/Main/icon1.png" />
                <div style="width: 100%; height:35%; font-size: 15px; margin-top: 4%;">全部</div>
                <div id="div_All" style="width: 100%; height:65%; font-size: 22px;">0</div>
            </div>
            <div id="btn_Normal" class="main-element" style="cursor: pointer; width: calc(25% + 6px); height: 100%; float: left; text-align: center; display: inline-block; position: relative;" >
                <img class="state-img" src="/Images/New/Main/icon2-green.png" />
                <div style="width: 100%; height:35%; font-size: 15px; margin-top: 4%;">正常</div>
                <div id="div_Normal" style="width: 100%; height:65%; font-size: 22px;">0</div>
            </div>
            <div id="btn_Fault" class="main-element" style="cursor: pointer; width: calc(25% + 6px); height: 100%; float: left; text-align: center; display: inline-block; position: relative;" >
                <img class="state-img" src="/Images/New/Main/icon3-red.png" />
                <div style="width: 100%; height:35%; font-size: 15px; margin-top: 4%;">故障</div>
                <div id="div_Fault" style="width: 100%; height:65%; font-size: 22px;">0</div>
            </div>
            <div id="btn_Scrap" class="main-element" style="cursor: pointer; width: calc(25% + 6px); height: 100%; float: left; text-align: center; display: inline-block; position: relative;" >
                <img class="state-img" src="/Images/New/Main/icon4-yellow.png" />
                <div style="width: 100%; height:35%; font-size: 15px; margin-top: 4%;">报废</div>
                <div id="div_Scrap" style="width: 100%; height:65%; font-size: 22px;">0</div>
            </div>
        </div>

css代码：

/* 未选中样式 */
        .main-element {
            background: url(/Images/New/Main/state2.png) no-repeat 0 0;
            background-size: 100% 80%;
            margin: -1px -1px;
            color: #2997c1;
        }

        /* 选中样式 */
        .main-element-selected {
            background: url(/Images/New/Main/state2-check.png) no-repeat center;
            background-size: 100% 100%;
            z-index: 999;
            margin: -1px -26px;  /* 设置外边距负值，实现覆盖两边元素的效果 */
            width: calc(25% + 40px) !important;
            color: #03fffc;
            line-height: 1.8;
        }

        /* 最后一个元素选中样式，背景图不一样 */
        .main-element-selected-last {
            background: url(/Images/New/Main/state2-check-last.png) no-repeat center;
            background-size: 100% 100%;
            z-index: 999;
            margin: -1px -26px;
            width: calc(25% + 16px) !important;  /* 根据靠边的效果调整宽度 */
            color: #03fffc;
            line-height: 1.8;
        }

js代码：

// 按钮点击事件
$("#btn_All").click(function () {
        $("#btn_All").attr("class", "main-element main-element-selected");
        $("#btn_Normal").attr("class", "main-element");
        $("#btn_Fault").attr("class", "main-element");
        $("#btn_Scrap").attr("class", "main-element");
    });

    $("#btn_Normal").click(function () {
        $("#btn_All").attr("class", "main-element");
        $("#btn_Normal").attr("class", "main-element main-element-selected");
        $("#btn_Fault").attr("class", "main-element");
        $("#btn_Scrap").attr("class", "main-element");
    });

    $("#btn_Fault").click(function () {
        $("#btn_All").attr("class", "main-element");
        $("#btn_Normal").attr("class", "main-element");
        $("#btn_Fault").attr("class", "main-element main-element-selected");
        $("#btn_Scrap").attr("class", "main-element");
    });

    $("#btn_Scrap").click(function () {
        $("#btn_All").attr("class", "main-element");
        $("#btn_Normal").attr("class", "main-element");
        $("#btn_Fault").attr("class", "main-element");
        // $("#btn_Scrap").attr("class", "main-element main-element-selected");
        $("#btn_Scrap").attr("class", "main-element main-element-selected-last");
    });