jQuery菜单栏tab鼠标经过滑动切换

上篇说过 “ jQ菜单栏tab点击切换 / 移除添加class方法 ” 那么有人就问我了，怎么滑动鼠标切换tab，这样更方便？其实也非常简单，实现鼠标经过滑动切换方法分享给大家参考。

引用js

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

js代码

$(function() {
    $('.laohan li').each(function() {
        $('.laohan li').mouseover(function() {
            var index = $(this).index();
            $('.laohan .bg').css('left', (index - 1) * 150 + 'px');
            $('.laohan li').css('color', '#000');
            $(this).css('color', '#fff');
            $('.tab2').removeClass('show')
            $('.tab2').eq(index - 1).addClass('show')
        });
    })
})

html代码

<div class="menus laohan">
    <ul>
        <div class="bg"></div>
        <li><span>tab1</span></li>
        <li><span>tab2</span></li>
        <li><span>tab3</span></li>
        <li><span>tab4</span></li>
        <li><span>tab5</span></li>
    </ul>
    <div class="clear"></div>
    <div class="tab tab2 show">
        内容1
    </div>
    <div class="tab tab2">
        内容2
    </div>
    <div class="tab tab2">
        内容3
    </div>
    <div class="tab tab2">
        内容4
    </div>
    <div class="tab tab2">
        内容5
    </div>
</div>

css代码

* {
margin:0;
padding:0
}
li {
list-style:none
}
.clear {
clear:both
}
.menus {
width:750px;
margin:40px auto
}
.menus ul {
width:750px;
position:relative;
float:left
}
.menus li {
float:left;
width:150px;
height:40px;
line-height:40px;
text-align:center;
cursor:pointer;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s
}
.menus li:nth-child(2) {
color:#fff
}
.menus .bg {
width:150px;
height:40px;
position:absolute;
left:0;
top:0;
background:#009fe9;
z-index:-1;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s
}
.tab {
width:750px;
height:400px;
border:1px solid #dadada;
margin-top:20px;
font-size:40px;
line-height:400px;
text-align:center;
color:#888;
font-weight:700;
display:none
}
.show {
display:block
}
.title {
text-align:center;
padding:20px;
background:#ccc
}