JQ實現選項卡切換

使用JQuery實現選項卡切換：觸發添加和刪除類名！

html代碼

　　　　　　　　　　　　<div>
                        <div class="ig">
                            <img src="images/dl1.jpg" alt="">
                            <div class="video-btn">
                                <p>Watch video</p>
                                <a href=""><i></i></a></div>
                        </div>
                    </div>
                    <ul>
                        <li>
                            <a href=""><i></i>5 year quality guarantee</a>
                        </li>
                        <li class="into">
                            <a href=""><i></i>Full redund policy for bad items </a>
                        </li>
                        <li>
                            <a href=""><i></i>LEAD-TIME GURANTEE</a>
                        </li>
                    </ul>

<div id="content">
        <div class="mod">
            <ul>
                <li><a href="#">內容1</a> </li>
                <li><a href="#">內容2</a> </li>
                <li><a href="#">內容3</a> </li>
            </ul>
        </div>
        <div class="mod" style="display: none">
            <ul>
                <li><a href="#">內容1</a> </li>
                <li><a href="#">內容2</a> </li>
                <li><a href="#">內容3</a> </li>
            </ul>
        </div>
        <div class="mod" style="display: none">
            <ul>
                <li><a href="#">內容1</a> </li>
                <li><a href="#">內容2</a> </li>
                <li><a href="#">內容3</a> </li>
            </ul>
        </div>
    </div>

　　

JQ代碼：鼠標移動觸發

$('ul li').mousemove(function() {
                    $(this).addClass('into').siblings().removeClass('into'); //給當前元素添加類名:into，並且刪除其兄弟元素的類名:into
                    var index = $(this).index();  //獲得當前元素的下標（序號），使得切換的時候一一對應
　　　　　　　　　　　　　//  當前元素的 父元素的 兄弟元素的 子元素：ig的子元素：img 更改其屬性值： src
                    $(this).parent().siblings().children('.ig').children('img').attr('src','http://vue.wuliwu.top/upload/20200327105102551.jpg');
//  獲取與之對應的li序號，顯示元素，隱藏兄弟元素
$("#content .mod").eq($("ul li").index(this)).show().siblings("#content .mod").hide();

})

　　

僅供參考！

 

解釋的有點生硬，直接上圖：

當鼠標移動的時候右側選項卡背景變為白色，左側圖片更改