左侧菜单切换后小图标跟随变化成选中的图标_点击侧边菜单图标更换src-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/78752303

博客探讨了如何实现在左侧菜单切换时，菜单图标从灰色变为白色的效果。通过指定不同图标名称（如XX和hua_XX），在选中状态下实现小图标的变化。

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

不同的图标，切换时候变化：

我给左侧灰色图标起名XX，鼠标选中后变白的图标相对应的叫：hua_XX

$(function() {

	//左侧
	var lib = $(".libg");
	var imgurl = $(lib).find('img').attr('src');
	var str1 = imgurl.substring(0, imgurl.lastIndexOf("/") + 1);
	var str2 = imgurl.substring(imgurl.lastIndexOf("/") + 1);
	var url = str1 + "hua_" + str2;
	$(lib).find('img').attr('src', url);
	$('.leftArea ul li').click(function() {
		
		$('.leftArea ul li').removeClass("libg");
		var alla = $('.leftArea ul li');
		for (var i = 0; i < $(alla).length; i++) {
			var imgurl = $(alla[i]).find('img').attr('src');
			
			var url = "";
			if(imgurl.indexOf("hua_")>0){
				var str1 = imgurl.substring(0, imgurl.lastIndexOf("/") + 1);
				var str2 = imgurl.substring(imgurl.lastIndexOf("/") + 5);
				url = str1+str2;
			}else{
				url = imgurl; 
			}
			$(alla[i]).find('img').attr('src', url);
		}
		$(this).addClass("libg");
		var imgurl = $(this).find('img').attr('src');
		var str1 = imgurl.substring(0, imgurl.lastIndexOf("/") + 1);
		var str2 = imgurl.substring(imgurl.lastIndexOf("/") + 1);
		var url = str1 + "hua_" + str2;

		$(this).find('img').attr('src', url);
	
	});
	$('.leftArea ul li').hover(function() {

		$(this).addClass('hoverlibg');
		$(this).siblings().removeClass('hoverlibg');
	}, function() {
		$(this).removeClass('hoverlibg');
	});
});