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); })}