jQuery背景跟随滑动Tab导航菜单

Surprise0
2019/4/19 16:56:14
我也这么觉得

段会岩0
2021/12/2 14:25:16
我也这么觉得

分享下本人修改的点击卡形式的代码，初学者多多包涵。

//点击选项卡形式
   var now = 0;
   $('.menus2 li').each(function() {
       //为每个li执行以下代码
       var index = $(this).index();
       $(this).mouseover(function() {
           //绑定当前li 鼠标指针指向事件
           $('.menus2 .bg').css('left',(index-1)*150+'px');
           //bg 滑动至当前li位置
           $('.menus2 li').css('color','#000');
           $(this).css('color','#fff');
           //改变全部li文字颜色
       }).click(function() {
           //绑定当前li 鼠标点击事件
           //点击说明滑块已经移动至此处
           $('.tab1').removeClass('show').eq(index-1).addClass('show');
           //TAB全部隐藏，当前位置li对应的TAB显示
           now = index-1;
           //保存滑块位置
       }).mouseout(function() {
           //绑定当前li 鼠标移出事件
           $('.menus2 .bg').css('left',now*150+'px');
           //滑块复位
           $('.menus2 li').css('color','#000').eq(now).css('color','#fff');
       });
   });