js实现页面滚动时自动切换Tab标签,点击标签自动滚动页面

        这个功能主要分为两步,第一步是点击Tab标签的同时,页面自动滚动到对应位置,这个实现起来比较简单,代码如下:

        这里只要获取到对象后直接使用scrollIntoView()就可以了,其中behavior: "instant"代表直接跳转到相应位置,而smooth代表平滑滑动过去,个人认为smooth用起来用户体验会比较好一点,但是也有一定缺点,具体情况具体分析吧。

        第二步就是随着页面滑动,自动切换Tab标签栏,这边要考虑到是整个页面的滑动还是页面中一个元素内部的页面滑动,整个页面的话就把获取到的元素换成window就可以,我这边主要贴一下部分元素内部的滑动吧,因为当时自己做的时候也是用window弄了好久发现根本监听不到页面滚动,具体代码如下:

        首先要打开监听事件:

        监听事件代码如下:

        我这边的tabbarList就是tab标签列表,这个for循环必须倒着来。getBoundingClientRect().top这个函数主要是用来帮助我们获取元素顶部到视口顶部的距离,这样就可以实现标题所说的功能了。

         最后要销毁监听事件:

 

 

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个基于jQuery实现展示多个tab标签和左右箭头滚动的示例代码: HTML部分: ```html <div class="tab-wrapper"> <div class="tab-scroll left-arrow"><i class="fa fa-chevron-left"></i></div> <div class="tab-container"> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> <li><a href="#tab5">Tab 5</a></li> <li><a href="#tab6">Tab 6</a></li> <li><a href="#tab7">Tab 7</a></li> </ul> </div> <div class="tab-scroll right-arrow"><i class="fa fa-chevron-right"></i></div> </div> ``` CSS部分: ```css .tab-wrapper { display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; max-width: 800px; } .tab-scroll { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease; } .tab-scroll:hover { opacity: 1; } .left-arrow { left: 0; } .right-arrow { right: 0; } .tab-container { flex: 1; overflow: hidden; padding: 0 50px; } .tabs { display: flex; list-style: none; margin: 0; padding: 0; } .tabs li { margin-right: 20px; } .tabs li:last-child { margin-right: 0; } .tabs a { display: block; padding: 10px; border: 1px solid #ccc; border-bottom: none; background-color: #f9f9f9; color: #333; text-decoration: none; } .tabs a:hover { background-color: #e5e5e5; } .tabs .active a { border-color: #ccc; border-bottom: none; background-color: #fff; font-weight: bold; } ``` JavaScript部分: ```javascript $(document).ready(function() { // 将tab标签容器和tab标签项存储为变量 var tabContainer = $('.tab-container'); var tabs = $('.tabs li'); // 获取每个tab标签项的宽度 var tabWidth = tabs.outerWidth(); // 计算tab标签容器的总宽度 var totalWidth = tabWidth * tabs.length; // 将tab标签容器的总宽度设置为tab标签容器的宽度 tabContainer.css('width', totalWidth + 'px'); // 点击左箭头向左滚动tab标签 $('.left-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft - tabWidth}, 200); }); // 点击右箭头向右滚动tab标签 $('.right-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft + tabWidth}, 200); }); // 点击tab标签切换内容 tabs.click(function() { var tab = $(this); var target = $(tab.find('a').attr('href')); // 移除所有tab标签项的active类 tabs.removeClass('active'); // 添加当前点击tab标签项的active类 tab.addClass('active'); // 隐藏所有内容 $('.tab-content').hide(); // 显示目标内容 target.show(); }); // 初始化第一个tab标签为active类 tabs.first().addClass('active'); // 显示第一个内容 $('#tab1').show(); }); ``` 这个示例代码中,我们首先将所有的tab标签项放在一个容器中,并将这个容器的宽度设置为所有tab标签项的宽度之和,这样就可以实现展示多个tab标签。然后,我们使用jQuery的scrollLeft()方法和animate()方法实现左右箭头的滚动效果。最后,我们使用jQuery的click()方法和addClass()方法、removeClass()方法和show()方法实现tab标签切换内容的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值