使用JQuery 快速实现hover 切换图片内容样式

使用JQuery 快速实现hover 切换图片内容样式

• 在实际开发项目中，我们通常会遇到有好几个交互标签，却只有一个div，div的内容随着所选标签页的不同而动态的变化（比如hover或者点击事件）

• 于是乎小白今天在做公司官网的时候，就遇到了这个交互的问题，因为公司官网是用JQ写的（比较久）所以就不用纯js来写逻辑了。

• 废话不多说，我们直接看demo

<div class="ksainewindex_foresee">
        <div class="ksainewindex_foresee_header ">
            销售流程可视化管理
        </div>
        <div class="ksainewindex_foresee_bg">
            <div id="ksainewindex_foresee_tab">
                <div class="ksainewindex_foresee_content ksainewindex_foresee_tablist">
                    <ul class="ksainewindex_foresee_word">  //这里是鼠标操作的地方
                        <li class="ksainewindex_foresee_cur">
                            <p>销售沟通内容管理</p>
                        </li>
                        <li>
                            <p>跟进进度记录管理</p>
                        </li>
                        <li>
                            <p>销售数据洞察</p>
                        </li>
                        <li>
                            <p>智能话术推荐</p>
                        </li>
                    </ul>
                </div>
                <div class="ksainewindex_foresee_tabcon"> //根据鼠标hover或者点击切换对应的div
                    <div class="ksainewindex_foresee_li ksainewindex_foresee_cur">
                        <div class="ksainewindex_foresee_list">
                            <div>
                                <p>销售沟通风控管理，及时避免企业损失</p>
                                <img width="1200" height="597" src="./images/Landing_page/1/scrm1_03.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="ksainewindex_foresee_li">
                        <div class="ksainewindex_foresee_list">
                            <div>
                                <p>“真人客服”自动化批量用户引导</p>
                                <img width="1200" height="589" src="./images/Landing_page/2/scrm2_03.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="ksainewindex_foresee_li">
                        <div class="ksainewindex_foresee_list">
                            <div>
                                <p>一键导入，Rpa自动完成上万粉丝的好友添加</p>
                                <img width="1200" height="600" src="./images/Landing_page/3/scrm3_03.png" alt="">
                                <div class="p3">信息流表单、CRM数据、HIS系统客户信息一键导入，批量自动加好友</div>
                            </div>
                        </div>
                    </div>
                    <div class="ksainewindex_foresee_li">
                        <div class="ksainewindex_foresee_list">
                            <div>
                                <p>“真人客服”自动化批量用户引导</p>
                                <img width="1200" height="603" src="./images/Landing_page/4/scrm4_03.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 <script type="text/javascript">
        $(function () {
            $(".ksainewindex_foresee_word li").hover(function () {
                $(this).parent(".ksainewindex_foresee_word").children("li").eq($(this).index()).addClass("ksainewindex_foresee_cur").siblings().removeClass("ksainewindex_foresee_cur");
                $(this).parents(".ksainewindex_foresee_tablist").next(".ksainewindex_foresee_tabcon").find("div.ksainewindex_foresee_li").hide().eq($(this).index()).show();
            });
        })
    </script>

• 搞定！
• 注意：代码可以复用，如果是同样的class名字,那么他也不会冲突。