对于html和jquery中动态更换图片以及同时更换图片颜色 在js文件中：
$(function() { $(".color_change>ul>li>img").click(function() { var a = $(this).attr("src"); //找到文字 获取 后续根据颜色切换 var color = $(this).attr("alt"); /*alert(color);*/ //split 分割字符串 var src = a.split("img/"); /*alert(src[1]);*/ var b = src[1].split(".jpg"); /*alert(b[0]);*/ //更换大图 $(".jqzoom>img").attr("src", "images/pro_img/" + b[0] + "_one_small.jpg"); $(".jqzoom>img").attr("jqimg", "images/pro_img/" + b[0] + "_one_big.jpg"); $("#thickImg").attr("href", "images/pro_img/" + b[0] + "_one_big.jpg"); //更换字体 $(".color_change:first strong").html(color); //更换下面三张图片 $(".imgList li img:eq(0)").attr("src", "images/pro_img/" + b[0] + "_one.jpg"); $(".imgList li img:eq(1)").attr("src", "images/pro_img/" + b[0] + "_two.jpg"); $(".imgList li img:eq(2)").attr("src", "images/pro_img/" + b[0] + "_three.jpg"); //绿色只有两张 如果绿色 把第三个隐藏掉 if(b[0] == "green") { $(".imgList li img:eq(2)").hide(); } else { $(".imgList li img:eq(2)").show(); } }) })效果图为原来和单机更换颜色后： 单击颜色后各方面的图片全部变换 以及下方选项卡产品属性之间切换： js文件：
/*Tab 选项卡 标签*/ $(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前<li>元素高亮 .siblings().removeClass("selected"); //去掉其他同辈<li>元素的高亮 var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。 $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div .eq(index).show() //显示 <li>元素对应的<div>元素 .siblings().hide(); //隐藏其他几个同辈的<div>元素 }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) })效果图：
