使用JQuery 快速實現hover 切換圖片內容樣式
阿新 • • 發佈:2022-05-07
使用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名字,那麼他也不會衝突。