jQuery如何实现页面切换时底部导航栏图标切换？

1、保存需要用到的图片

2、先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。

以下为html部分

3、JavaScript部分

//点击每个按钮后进行按钮切换图片操作

$(".tab-bar-item").on("click", function () {

        //先const clickImg变量为他的data属性（选中图片） ，然后找到img图片的src属性将未选中的图片点击后替换为选中图片

      const clickImg = $(this).data("img");

      $(this).find("img").attr("src",clickImg);

      //找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了

      $(this).siblings().each(function(){

        const noclickImg= $(this).attr("img")

        $(this).find("img").attr("src",noclickImg);

      })

}