<script>
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
initPicture();
changePicture();
});
function initPicture() {
var length = $(".active").siblings().length;
for(var i=0;i<length;i++){
var html = $(".active").siblings()[i];
//获得当前非active图片的路径
var src_path_later = $(html).children("img")[0].src;
//把图片路径的1改为2,初始化图片
var src_path_init = src_path_later.replace("_2","_1");
$(html).children("img").attr('src',src_path_init);
}
}
function changePicture() {
//获得当前点击图片的路径
var src_path = $(".active").children("img")[0].src;
//把图片路径的1改为2
var src_path2 = src_path.replace("_1","_2");
$(".active").children("img").attr('src',src_path2);
}
</script>
开发过程遇到了,底部的footer是5个图标,希望可以达到默认第一个点亮,点击哪个图标哪个图标点亮。需要做三步操作:
(1)清空所有active属性,给点击的图标加active属性
(2)把所有图片都置为不亮的图片
(3)把active的图片换成亮的
这里因为图片的名称都不相同,亮的和不亮的只有_1和_2的区别。通过更改路径达到要求。
新手小白,做的很慢。。。。记录下龟爬的岁月。。。