选项卡 || 图片切换

 //选项卡
        移入当前选项，显示对应的内容，在移入下一个板块前，当前高亮不会消失

$(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="width: 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;width: 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>