jquery踩坑之tab选项卡切换，标题栏包含icon小图标跟着对应切换

本文描述了一个开发者在实现需求稿中左侧标题栏图标随tab切换动态变化的过程，涉及CSS样式和JavaScript代码，展示了如何使用背景图片和索引来控制图标显示位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先给大家看下我的需求稿 tab切换实现不难但是左侧标题栏的小图标切换的时候跟着变着实有一丢丢费我脑子~~太菜了没办法（暴风式哭泣）
我想了想然后让设计给我做了张雪碧图开干~
在这里插入图片描述
由于左侧有10个标题栏太多在这里演示的时候我只写前几个

               <div class="soft_container">
                    <div id="first_soft" class="left_soft">
                        <p class="soft_rows soft_active"><span class="icon1"></span>水利水运</p>
                        <p class="soft_rows"><span class="icon2"></span>电力电网</p>
                        <p class="soft_rows"><span class="icon3"></span>高标准农田</p>
                    </div>
                    <div id="first_right" class="right_soft">
                        <div>水利水运</div>
                        <div style="display: none">电力电网</div>
                        <div style="display: none">高标准农田</div>
                    </div>
               </div>

css
下面css最重要的是.soft_rows.soft_active .icon1，.soft_rows.soft_active .icon2，.soft_rows.soft_active .icon3这一部分

  .soft_container{
    display: flex;
    justify-content: space-between;
}
.left_soft{
    width: 226px;
}
.soft_rows{
    width: 226px;
    height: 51px;
    line-height: 51px;
    padding-left: 51px;
    background: linear-gradient(210deg, #F1F8FF, #FFFFFF);
    box-shadow: 0px 1px 30px 0px rgba(193,203,221,0.4), 0px 9px 11px 0px rgba(255,255,255,0.35);
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    margin-bottom: 4px;
    font-size: 16px;
    color: #393939;
    cursor: pointer;
}
.soft_rows span{
    display: inline-block;
    width: 24px;
    height: 19px;
    margin-right: 20px;
}
.soft_active{
    font-size: 17px !important;
    color: #FFFFFF !important;
    font-weight: bold;
    background: linear-gradient(90deg, #1F8BFA, #2163FA)  !important;
    box-shadow: 0 9px 20px 0 rgba(33,102,250,0.23)  !important;
}
.icon1{
    background-image: url("../img/sm_icon.png");
    background-position: 0 0;
    vertical-align: middle;
    position: relative;
    top: 0;
}
.soft_rows.soft_active .icon1{
    background-image: url("../img/sm_icon.png");
    background-position: 24px 0;
    vertical-align: middle;
    position: relative;
    top: 0;
}

.icon2{
    background-image: url("../img/sm_icon.png");
    background-position: 0 -19px;
    vertical-align: middle;
    position: relative;
    top: 0;
}
.soft_rows.soft_active .icon2{
    background-image: url("../img/sm_icon.png");
    background-position: 24px -19px;
    vertical-align: middle;
    position: relative;
    top: 0;
}
.icon3{
    background-image: url("../img/sm_icon.png");
    background-position: 0 -38px;
    vertical-align: middle;
    position: relative;
    top: 0;
}
.soft_rows.soft_active .icon3{
    background-image: url("../img/sm_icon.png");
    background-position: 24px -38px;
    vertical-align: middle;
    position: relative;
    top: 0;
}

js部分

    $(document).ready(function(){
        $("#first_soft>p").each(function () {
            $(this).click(function () {
                $(".soft_rows").removeClass("soft_active");
                $(this).addClass("soft_active");
                var index = $(this).index();
                $(this).children("span").css("background-position", "24px" + (-19 * index == 0 ? 0 : (index + 1)) + "px");
                $("#first_right>div:visible").hide()
                $("#first_right>div").eq(index).show()
            })
        })
    });

完结~~小仙女撒花