//选项卡
移入当前选项,显示对应的内容,在移入下一个板块前,当前高亮不会消失
移入当前选项,显示对应的内容,在移入下一个板块前,当前高亮不会消失
$(function(){ $('.main2 ul li').mouseenter(function(){ $(this).addClass('on'); $(this).siblings().removeClass('on');//滑过当前变 var index=$(this).index();//滑过当前时自身所对应的内容变 $('.img_con').hide(); $('.img_con:eq('+index+')').show(); }); });
.x_khjzUL li 选项卡
current 第一个默认的样式
content_nr 每个选项卡对应的内容
注意:
如果同一个页面有很多特效要实现,这个功能在实现时尽量不要用superslider等插件,因为这样会冲突,导致另外一个特效出不来
HTML:
<div class="main2"> <div class="container"> <ul style=" 1024px;position: relative;" class="clearfix"> <li class="on"> <img class="sho" src="./static/images/grey1.png"/> <img class="non" src="./static/images/green1.png"/> <p class="f24 text-center lin30">身心监测</p> </li> <li> <img class="sho" src="./static/images/grey2.png"/> <img class="non" src="./static/images/green2.png"/> <p class="f24 text-center lin30">视频教学</p> </li> <li> <img class="sho" src="./static/images/grey3.png"/> <img class="non" src="./static/images/green3.png"/> <p class="f24 text-center lin30">音乐放松</p> </li> <li> <img class="sho" src="./static/images/grey4.png"/> <img class="non" src="./static/images/green4.png"/> <p class="f24 text-center lin30">反馈应激</p> </li> <li style="margin-right:0;"> <img class="sho" src="./static/images/grey5.png"/> <img class="non" src="./static/images/green5.png"/> <p class="f24 text-center lin30">效果评估</p> </li> </ul> <div class="m2_img"> <img style="position: absolute; 802px;height:400px;left: 110px;top: 60px;" src="./static/images/m2_demo.png" alt="样机"/> <img style="position:absolute;left: 228px;top: 87px;z-index: 9999" class="img_con img_on" src="./static/images/Psycho_moni.png" alt="身心监测"/> <img style="position:absolute;left: 228px;top: 88px;z-index: 9999" class="img_con" src="./static/images/Video_teaching.png" alt="视频教学"/> <img style="position:absolute;left: 228px;top: 88px;z-index: 9999" class="img_con" src="./static/images/music_relax.png" alt="音乐放松"/> <img style="position:absolute;left: 228px;top: 88px;z-index: 9999" class="img_con" src="./static/images/feedback.png" alt="反馈应激"/> <img style="position:absolute;left: 228px;top: 88px;z-index: 9999" class="img_con" src="./static/images/effect.png" alt="效果评估"/> </div> </div> </div>
CSS:
/*main2*/ .main2{ margin-top: 170px; width: 100%; height: 700px; } .main2 ul li{ float: left; margin-right: 85px; } .non{ display: none; } .m2_img{ position: relative; width: 100%; height: 510px; } .m2_img img.non{ width: 598px; height: 332px; } .m2_img .img_on{ display: block; } .lin30{ height: 30px; line-height: 60px; } .on p{ color: #3daf36; } .on img.sho{ display: none; } .on img.non{ display: block; }
切换图片:
如果只是简单的切换图片,只有在移入当前板块时高亮才会显示,不在当前选项时,高亮不显示; 一瞬间
//售后服务 $(".shfw ul li").mouseenter(function(){ $(this).find("img.non").css("display","block");//同级 $(this).css("border","1px solid #3daf36"); $(this).find("img.sho").css("display","none");//同级 }); $(".shfw ul li").mouseleave(function(){ $(this).find("img.non").css("display","none");//同级 $(this).css("border","0"); $(this).find("img.sho").css("display","block");//同级 });
html
<ul class="clearfix"> <li> <img class="sho" src="./static/images/serv1.png" alt=""/> <img src="./static/images/serv1_gr.png" alt="" class="non"/> <h3 class="f24 bold text-center">强大的服务团队</h3> <p> <span class="color_green">师大专家</span>和<span>留美硕士</span>组成的专业顾问</p> </li> <li> <img class="sho" src="./static/images/serv2.png" alt=""/> <img src="./static/images/serv2_gr.png" alt="" class="non"/> <h3 class="f24 bold text-center">强大的服务团队</h3> <p> <span class="color_green">7*12小时服务时间</span></p> </li> <li> <img class="sho" src="./static/images/serv3.png" alt=""/> <img src="./static/images/serv3_gr.png" alt="" class="non"/> <h3 class="f24 bold text-center">强大的服务团队</h3> <p> <span class="color_green">电话咨询、远程协助、亲临现场等多样化服务形式</span></p> </li> <li style="margin-right: 0!important;"> <img class="sho" src="./static/images/serv4.png" alt=""/> <img src="./static/images/serv4_gr.png" alt="" class="non"/> <h3 class="f24 bold text-center">强大的服务团队</h3> <p>提供<span class="color_green">技能培训、资格认证</span>等服务</p> </li> </ul>