效果图展示：

html原生代码：

 <div>
            <div class="buttons-row nav-select riskType" style="padding: 10px;">
                <div class="shoucang-title-box flex-start">
                    <div class="shoucang-title-item active">
                        <div class="shoucang-biaojidian swiperStyle">标记点</div>
                    </div>
                    <div class="shoucang-title-item">
                        <div class="shoucang-route swiperStyle">历史航线</div>
                    </div>
                    <div class="shoucang-title-item">
                        <div class="shoucang-quyu swiperStyle">区域</div>
                    </div>
                </div>
            </div>
            <div class="shoucang-content-box" style="background-color: #fff;">
                <div id="tabhx1" class="shoucang-content-item shoucang-content-biaojidian active">
                    <ul>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name text-ellipsis">涠洲岛钓鱼点</div><i class="biaojidian-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name text-ellipsis">涠洲岛</div><i class="biaojidian-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name">钓鱼点</div><i class="biaojidian-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name">鱼潮</div><i class="biaojidian-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name">海南</div><i class="biaojidian-del"></i>
                        </li>
                        <hr>
                    </ul>
                </div>
                <div id="tabhx2" class="shoucang-content-item shoucang-content-route">
                    <ul>
                        <li class="route-item">
                            <div class="route-name text-ellipsis">南沙港-徐闻港</div>
                            <div class="route-item-inner flex-space-between">
                                <div class="route-time">时间:2023-10-25 12:20:30</div>
                                <div class="route-qiyong">重新启用</div>
                            </div>
                        </li>
                        <hr>
                        <li class="route-item">
                            <div class="route-name text-ellipsis">茂名港-徐闻港</div>
                            <div class="route-item-inner flex-space-between">
                                <div class="route-time">时间:2023-10-25 12:20:30</div>
                                <div class="route-qiyong">重新启用</div>
                            </div>
                        </li>
                        <hr>
                        <li class="route-item">
                            <div class="route-name text-ellipsis">南沙港-涠洲岛</div>
                            <div class="route-item-inner flex-space-between">
                                <div class="route-time">时间:2023-10-25 12:20:30</div>
                                <div class="route-qiyong">重新启用</div>
                            </div>
                        </li>
                        <hr>
                    </ul>
                </div>
                <div id="tabhx3" class="shoucang-content-item shoucang-content-quyu">
                    <ul>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name text-ellipsis">石斑鱼区域</div><i class="quyu-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name text-ellipsis">浅水区域</div><i class="quyu-del"></i>
                        </li>
                        <hr>
                        <li class="biaojidian-item">
                            <div class="biaojidian-name">礁石区域</div><i class="quyu-del"></i>
                        </li>
                        <hr>
                    </ul>
                </div>
            </div>
        </div>

jquery核心：

 //切换内容
$(".shoucang-title-item").on("click", function () {
    if (!$(this).hasClass("active")) {
      $(this).addClass("active").siblings().removeClass("active")
      let titleIndex = $(this).index();
      $(".shoucang-content-item").each(function () {
            if (titleIndex == $(this).index()) {
                $(this).addClass("active").siblings().removeClass("active")
            }
      })
      }
    return false
})

 css样式切换，会更改icon颜色、背景色等：

.shoucang-title-box .shoucang-route {
    background: rgba(238, 240, 243, 1) url(../img/yuming/shoucang/icon-hx.png) no-repeat 5px center/16px;
}

.shoucang-title-box .active .shoucang-route {
    background: rgba(60, 141, 240, 0.15) url(../img/yuming/shoucang/icon-hx-active.png) no-repeat 5px center/16px;
}

备注：

移动端：

background: #ffffff url(../img/route/icon-dw.png) no-repeat 98% center/16px;

background: url(../img/route/icon-hxjh.png) no-repeat 10px center/16px;

background: #ffffff url(../img/yuming/icon-ym-dw.png) no-repeat center/17px;

background: url(../img/yuming/icon-xiugai.png) no-repeat center/contain;

background: url(../img/yuming/icon_delete.png) no-repeat left center/14px;