js样式,默认显示第一个

1、
$('.z_scly_li li').mouseover(function(){
$(this).find('a').addClass('z_scly_li_on').parent().siblings().find('a').removeClass('z_scly_li_on');
});

样式:
.z_scly_li_on{
color:#1565c0!important;
text-decoration:underline!important;
}
HTML:
<ul class="z_scly_li">
<li><a class="z_scly_li_on" href="">心理箱庭疗法</a></li>
<li><a href="">心理咨询</a></li>
<li><a href="">心理测量</a></li>
<li><a href="">个人成长</a></li>
<li><a href="">案例督导</a></li>
<li><a class="z_connect f16" href="">联系咨询</a></li>
</ul>
2、
$(".qtzjtj_con").find("li").hover(function(){
$(this).addClass("on").siblings().removeClass("on");
});
$(".qtzjtj_con").find("li").mouseover(function(){
$(this).find('img').addClass("onn");
}).mouseout(function(){
$(this).find('img').parent().siblings().find('img').removeClass("onn");
});

HTML:
<ul class="qtzjtj_con text-center">
<li class="on"><img class="img-circle onn" src="static/images/图层 3.png" style="width:168px;height:168px;border:1px solid #e1e1e1;"/>
<p style="margin-top:130px;"> <h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
<li><img class="img-circle" src="static/images/图层 3.png" style="width:168px;height:168px;border:1px solid #e1e1e1;"/>
<p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
<li><img class="img-circle" src="static/images/图层 3.png" style="width:168px;height:168px;border:1px solid #e1e1e1;"/>
<p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
<li><img class="img-circle" src="static/images/图层 3.png" style="width:168px;height:168px;border:1px solid #e1e1e1;"/>
<p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
</ul>

样式:
.on{
border:1px solid #1e88e5!important;
}
.onn{
border:1px solid #1e88e5!important;
}

3、
$('.z_hyzc1>div').mouseover(function(){
$(this).addClass('z_on').siblings().removeClass('z_on'); //找同级的
$(this).addClass('z_on').parent().siblings().find('div').removeClass('z_on'); //找父级里的子级
});
 


posted @ 2017-05-15 16:35  和路雪  阅读(516)  评论(0编辑  收藏  举报