整体思路:
点击某个li 元素,替换其中img标签中的src属性,且要让其他的所有兄弟li元素变为默认的图片。由于每个li元素的默认图片和要替换的图片都不一样。难度就在此。
需要注意的几个地方:
每个li要使用的图片统一命名, 如:
默认图片为:demo_d.png
。点击切换图片为:demo_c.png
可以使用纯js来书写,因为如果使用jquery来遍历每个li元素的兄弟节点稍微有点麻烦。下面的代码使用纯为jquery,没有使用原生js,使用每个li元素的class来遍历兄弟节点,具体看代码注释。
- 如果各位看官有更好一点的方法,欢迎指正和分享。
<div class="personConLeft">
<ul>
<li class="0"><img src="../../static/img/personCenter/submit_d.png"/> <a >我的发布</a></li>
<li class="1"><img src="../../static/img/personCenter/copro_d.png"/><a>我的合作</a></li>
<li class="2"><img src="../../static/img/personCenter/promote_d.png"/><a>我的推广</a></li>
<li class="3"><img src="../../static/img/personCenter/confirm_d.png"/><a>认证中心</a></li>
<li class="4"><img src="../../static/img/personCenter/money_d.png"/><a>钱包</a></li>
<li class="5"><img src="../../static/img/personCenter/set_d.png"/><a>设置</a></li>
</ul>
</div>
var index = 10;
var flag = false;
var oldIndex = 10;
$('.personConLeft ul li').click(function(){
// 自己修改样式
$(this).css({'background':'#488eff','left':"-90px"});
// 解除绑定的hover事件
$(this).unbind('mouseenter').unbind('mouseleave');
index = $(this).attr('class');
// 修改字体颜色/图片src
$(this).children('a').css({'color':'#fff'});
var img_d = $(this).children('img').attr('src');
var img_c = img_d.replace(/_d/,'_c')
$(this).children('img').attr('src',img_c);
// 兄弟节点修改样式
// 修改字体颜色/背景颜色
$(this).siblings().css({'background':'#fff'});
$(this).siblings().children('a').css({'color':'#488eff'});
// 将上一个保存的li,恢复鼠标移入移出动作
if(flag = true){
$(this).siblings('.'+oldIndex).animate({left:"0"})
$(this).siblings('.'+oldIndex).mouseenter(function(){
$(this).animate({left:"-90px"})
})
$(this).siblings('.'+oldIndex).mouseleave(function(){
$(this).animate({left:"0"})
});
}
flag = true;
oldIndex = index;
//拿到兄弟节点的个数
var len = $(this).siblings().length;
// 根据class,循环修改每个兄弟节点中的图片src
for(var i=0;i<=len;i++){
var img_d = $(this).siblings('.'+i).children('img').attr('src');
if(img_d){
var img_c = img_d.replace(/_c/,'_d')
$(this).siblings('.'+i).children('img').attr('src',img_c);
}
}
})