如何使此代码更具动态性和功能性?

穆罕默德·萨多克(Mohamed Sadok yahyaoui)

我正在制作一个jQuery函数,当滚动到另一个块中的相关块时,将“活动”类添加到旁边的块中。
该代码正在运行,但是我想使其更具动态性和功能性。

if ($('.reglementation .nav.nav-pills').length > 0) {
  $(window).scroll(function() {

    var screenPosition = $(document).scrollTop() + 20;

    if (screenPosition >= $('#tab272').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab272"]').addClass('active');
    }

    if (screenPosition >= $('#tab275').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab275"]').addClass('active');
    }

    if (screenPosition >= $('#tab278').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab278"]').addClass('active');
    }

    if (screenPosition >= $('#tab285').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab285"]').addClass('active');
    }

    if (screenPosition >= $('#tab290').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab290"]').addClass('active');
    }

    if (screenPosition >= $('#tab300').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab300"]').addClass('active');
    }
    if (screenPosition >= $('#tab377').offset().top) {
      $('ul.nav li').parent().find('a.active').removeClass('active');
      $('ul.nav li a[href="#tab377"]').addClass('active');
    }

  });
}
用户名
$(window).scroll(function() {

    var screenPosition = $(document).scrollTop() + 20;
    var currentTab = null;

    $(document).find('*[id^="tab"]').each(function(){
        if ( screenPosition >= $(this).offset().top ){
            currentTab = $(this);
        }
    });

    $('ul.nav').find('a.active').removeClass('active');
    $('ul.nav').find('a[href="#' + currentTab.attr('id') + '"]').addClass('active');
}

您可以通过将每个选项卡的偏移量与screenPosition进行比较来找到currentTab。然后从当前的活动类中删除,并将class添加到新元素。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

使Clojure let语句更具功能性

来自分类Dev

如何重构此代码以使其更具可读性和效率?

来自分类Java

可以使Optional的这种用法更具功能性吗

来自分类Dev

如何为开源项目进行(功能性)校验和?

来自分类Dev

重写Scala代码以提高功能性

来自分类Dev

功能性TypeScript和泛型

来自分类Dev

JavaScript-如何使其更具动态性?

来自分类Dev

如何使此功能更具可重用性/特定性/更好的设计?

来自分类Dev

取反功能(功能性)

来自分类Dev

我应该如何使此Navbar更具响应性?

来自分类Dev

keras功能性api和多个合并层

来自分类Dev

如何将该范围更改为更具动态性?

来自分类Dev

如何对道具进行分组并使代码更具可读性?

来自分类Dev

如何在功能性HOC中访问道具?

来自分类Java

如何以功能性方式替换循环?

来自分类Dev

如何基于功能性API命名keras模型

来自分类Java

建议编写更具可读性的代码?

来自分类Dev

试图理解功能性论点

来自分类Dev

功能性Java 8与传统Java

来自分类Dev

功能性的C ++ 11奇怪行为

来自分类Dev

Fortran是纯功能性语言吗?

来自分类Java

如何降低此代码的复杂性?

来自分类Dev

是否可以改善功能性容器的渐近性?

来自分类Dev

功能性JavaScript:闭包和递归。为什么会失败?

来自分类Dev

Python的argparse多功能性的能力真/假和字符串?

来自分类Dev

LazyList与Stream的中断超时和比较之间的延迟的懒惰迭代的功能性方法

来自分类Dev

使用Jest和Enzyme测试使用Redux的功能性React组件

来自分类Dev

如何使x标签更具可读性?

来自分类Dev

如何使Excel公式更具可读性?

TOP 榜单

热门标签

归档