• 在实际开发项目中，我们通常会遇到有好几个交互标签，却只有一个div，div的内容随着所选标签页的不同而动态的变化（比如hover或者点击事件）
    • 于是乎小白今天在做公司官网的时候，就遇到了这个交互的问题，因为公司官网是用JQ写的（比较久）所以就不用纯js来写逻辑了。
    • 废话不多说，我们直接看demo 
      1. <div class="ksainewindex_foresee">
      2.      <div class="ksainewindex_foresee_header ">
      3.          销售流程可视化管理
      4.      </div>
      5.      <div class="ksainewindex_foresee_bg">
      6.          <div id="ksainewindex_foresee_tab">
      7.              <div class="ksainewindex_foresee_content ksainewindex_foresee_tablist">
      8.                  <ul class="ksainewindex_foresee_word">  //这里是鼠标操作的地方
      9.                      <li class="ksainewindex_foresee_cur">
      10.                          <p>销售沟通内容管理</p>
      11.                      </li>
      12.                      <li>
      13.                          <p>跟进进度记录管理</p>
      14.                      </li>
      15.                      <li>
      16.                          <p>销售数据洞察</p>
      17.                      </li>
      18.                      <li>
      19.                          <p>智能话术推荐</p>
      20.                      </li>
      21.                  </ul>
      22.              </div>
      23.              <div class="ksainewindex_foresee_tabcon"> //根据鼠标hover或者点击切换对应的div
      24.                  <div class="ksainewindex_foresee_li ksainewindex_foresee_cur">
      25.                      <div class="ksainewindex_foresee_list">
      26.                          <div>
      27.                              <p>销售沟通风控管理，及时避免企业损失</p>
      28.                              <img width="1200" height="597" src="./images/Landing_page/1/scrm1_03.png" alt="">
      29.                          </div>
      30.                      </div>
      31.                  </div>
      32.                  <div class="ksainewindex_foresee_li">
      33.                      <div class="ksainewindex_foresee_list">
      34.                          <div>
      35.                              <p>“真人客服”自动化批量用户引导</p>
      36.                              <img width="1200" height="589" src="./images/Landing_page/2/scrm2_03.png" alt="">
      37.                          </div>
      38.                      </div>
      39.                  </div>
      40.                  <div class="ksainewindex_foresee_li">
      41.                      <div class="ksainewindex_foresee_list">
      42.                          <div>
      43.                              <p>一键导入，Rpa自动完成上万粉丝的好友添加</p>
      44.                              <img width="1200" height="600" src="./images/Landing_page/3/scrm3_03.png" alt="">
      45.                              <div class="p3">信息流表单、CRM数据、HIS系统客户信息一键导入，批量自动加好友</div>
      46.                          </div>
      47.                      </div>
      48.                  </div>
      49.                  <div class="ksainewindex_foresee_li">
      50.                      <div class="ksainewindex_foresee_list">
      51.                          <div>
      52.                              <p>“真人客服”自动化批量用户引导</p>
      53.                              <img width="1200" height="603" src="./images/Landing_page/4/scrm4_03.png" alt="">
      54.                          </div>
      55.                      </div>
      56.                  </div>
      57.              </div>
      58.          </div>
      59.      </div>
      60.  </div>
    1.  <script type="text/javascript">
    2.         $(function () {
    3.             $(".ksainewindex_foresee_word li").hover(function () {
    4.                 $(this).parent(".ksainewindex_foresee_word").children("li").eq($(this).index()).addClass("ksainewindex_foresee_cur").siblings().removeClass("ksainewindex_foresee_cur");
    5.                 $(this).parents(".ksainewindex_foresee_tablist").next(".ksainewindex_foresee_tabcon").find("div.ksainewindex_foresee_li").hide().eq($(this).index()).show();
    6.             });
    7.         })
    8.     </script>
    • 搞定！
    • 注意：代码可以复用，如果是同样的class名字,那么他也不会冲突。