Javascript 使一条导航链路跨多个区段激活（使用类？？）

当用户浏览我网站的多个部分时，我只需要一个处于活动状态的导航链接。如何对这个JS进行适当的编辑以实现这一点

例如，如果默认导航链接id=#dinos_

我希望我所有的部分都使用部分id，如#恐龙#特雷克斯、#恐龙#猛禽、#恐龙#三角龙，以保持导航id=#恐龙#在导航中保持活动状态

经过进一步的研究，有人能用“类”来编写代码吗？ 假设一组div共享一个特定的类名，在本例中为“dinos_u2;”，如果用户在“任何”相关的“dinos_2;”部分，我如何为一个导航项设置活动状态

以下是当前使用的jquery Im：

var sections = $('section'), nav = $('nav'), nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');

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

这是我的HTML

<header id="header">

            <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><a href="#DINOS_">DINOS</a></li> /*multiple unique section ids that contain the word dinos_ in their id name should set this to 'active */
                        <li><a href="#ROBOTS_">ROBOTS</a></li> /*multiple unique section ids that contain the word robots_ in their id name should set this to 'active */
                        <li><a href="#UNDEAD_">UNDEAD</a></li> /*multiple unique section ids that contain the word undead_ in their id name should set this to 'active */
                </ul>
                </nav>

        </header>
    <section id="dinos_" class="main style2 right dark fullscreen">
                <div class="content box style2">
                    <header>
                        <h2>DINOSAURS INTRO</h2>
                    </header>
                    <p>
                     Intro to the dinos</p>
                </div>
                <a href="#main" class="button style2 up anchored" title="DINOS - INTRO">up</a>
                <a href="#dinos_trex" class="button style2 down anchored" title="DINOS - TREX">down</a>
            </section>

<section id="dinos_trex" class="main style2 left dark fullscreen">
                <div class="content box style2">
                    <header>
                        <h2>T-REX</h2>
                    </header>
                    <p>
                   Section for the T-rex</p>
                </div>
                <a href="#dinos_" class="button style2 up anchored" title="DINOS - INTRO">up</a>
                <a href="#dinos_raptor" class="button style2 down anchored" title="DINOS - RAPTOR">down</a>
            </section>
<section id="dinos_raptor" class="main style2 left dark fullscreen">
                <div class="content box style2">
                    <header>
                        <h2>THE RAPTOR</h2>
                    </header>
                    <p>
                   Section for the raptor/p>
                </div>
                <a href="#dinos_trex" class="button style2 up anchored" title="DINOS - TREX">up</a>
                <a href="#robots_" class="button style2 down anchored" title="ONLY ROBOTS">down</a>
            </section>
<section id="robots_" class="main style2 left dark fullscreen">
                <div class="content box style2">
                    <header>
                        <h2>ROBOTS INTRO</h2>
                    </header>
                    <p>
                   Section for the Robots Intro</p>
                </div>
                <a href="#dinos_raptor" class="button style2 up anchored" title="DINOS - TREX">up</a>
                <a href="#robots_gunner" class="button style2 down anchored" title="ROBOT - GUNNER">down</a>
            </section>
<section id="robots_gunner" class="main style2 left dark fullscreen">
                <div class="content box style2">
                    <header>
                        <h2>THE ROBOT GUNNER</h2>
                    </header>
                    <p>
                   Section for the gunner</p>
                </div>
                <a href="#robots_" class="button style2 up anchored" title="ROBOTS - INTRO">up</a>
                <a href="#robots_jumper" class="button style2 down anchored" title="ROBOTS - JUMPER">down</a>
            </section>

/*在id名称中包含单词dinos_uu的多个唯一分区id应将其设置为“活动”*/
/*在id名称中包含单词robots_uu的多个唯一分区id应将其设置为“活动”*/
/*在id名称中包含单词亡灵的多个唯一分区id应将其设置为“活动”*/

恐龙简介

恐龙简介

霸王龙

霸王龙部分

猛禽

猛禽节/p>
机器人简介

机器人介绍部分

机枪手

炮手组

使用航路点插件：

已更新

JS:

   $('section').waypoint({
        handler: function (direction) {
            $(".active").removeClass("active");
            $("nav a[href=\"#" +this.element.id + "\"").addClass("active");
        }
    });

HTML，但有一些小改动：

<header id="header">
        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="#dinosaurs">DINOS</a>
                </li>
                <li><a href="#dinosaurs_trex">ROBOTS</a>
                </li>
                <li><a href="#dinosaurs_raptor">UNDEAD</a>
                </li>
            </ul>
        </nav>
    </header>
    <section id="dinosaurs" class="main style2 right dark fullscreen">
        <div class="content box style2">
            <header>
                 <h2>DINOSAURS INTRO</h2>

            </header>
            <p>Intro to the dinos</p>
        </div> <a href="#main" class="button style2 up anchored" title="PAGE 1">up</a>
     <a href="#dinosaurs_trex" class="button style2 down anchored" title="DINOSUARS TREX">down</a>

    </section>
    <section id="dinosaurs_trex" class="main style2 left dark fullscreen">
        <div class="content box style2">
            <header>
                 <h2>TREX</h2>

            </header>
            <p>Section for the Trex</p>
        </div> <a href="#dinosaurs" class="button style2 up anchored" title="page1">up</a>
     <a href="#dinosaurs_raptor" class="button style2 down anchored" title="page3">down</a>

    </section>
    <section id="dinosaurs_raptor" class="main style2 left dark fullscreen">
        <div class="content box style2">
            <header>
                 <h2>THE RAPTOR</h2>

            </header>
            <p>Section for the Trex</p>
        </div> <a href="#dinosaurs_trex" class="button style2 up anchored"       title="page1">up</a>
     <a href="#robots" class="button style2 down anchored" title="page3">down</a>

    </section>

恐龙简介
恐龙简介

特雷克斯
Trex部分

猛禽
Trex部分

这是一把小提琴：

更改您的密码

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

对此

function activateNav() {
    var hashValue = window.location.hash.substr(1);
    $('body').find('a[href="#'+ hashValue +'"]').addClass('active');
}

$( document ).ready(function() {
    activateNav();
    $('a').on('click', function() {
        activateNav();
    });
});

---

您是否使用过waypoints.js？我认为这会使你的任务变得更容易。@ChrisJ我认为用一个完整的库来保存一小段代码是没有意义的。航路点不是一个库。它是一个插件，专门为元素滚动到时的触发事件而构建。JQuery将是第一个示例中已经使用的唯一所需库。但是，如果你没有使用jQuery waypoints，也可以不使用它作为依赖项。我想说的是，我这次不会使用waypoints，因为我已经将scrolly和scrollgress作为我的设置的一部分，我已经添加了我的HTML，所以我的设置有了更好的解释。啊，谢谢你的帮助；我想我需要更好地解释我的独特需求，基本上我希望所有恐龙部分只突出显示一个恐龙导航项目，因为用户正在滚动恐龙。然后我希望机器人部分只突出显示一个机器人导航项目，在您当前的小提琴中，您已将不同的恐龙分配给不同的导航项目。如果你需要更多信息，请告诉我。谢西姆没有跟上。你给的导航有“恐龙，机器人，不死生物”作为选项。如果你只是想让dinos在该部分突出显示，请将航路点更改为目标“#恐龙”，然后抓取dinos的链接并添加activeOh抱歉，我的意思是我想让dino部分有一个介绍部分，突出显示dinos导航栏，但我想让dinos的另一部分-trex作为自己的部分，但我希望它仍然突出显示“一”恐龙导航链接-然后当用户向下滚动通过恐龙介绍和特雷克斯介绍部分时，我希望恐龙-猛禽“部分”仍然突出显示一个“恐龙”导航项目。。是这样的。帮助？所以基本上我希望所有三个与恐龙相关的部分：当滚动浏览它们时，只有一个活动的“恐龙”导航项目处于活动状态。谢谢，但不幸的是，这不起作用。简单回顾一下，我有一个名为

的导航项目，我想要三个单独的部分ID，它们都突出显示一个导航项目“恐龙”。。

function activateNav() {
    var hashValue = window.location.hash.substr(1);
    $('body').find('a[href="#'+ hashValue +'"]').addClass('active');
}

$( document ).ready(function() {
    activateNav();
    $('a').on('click', function() {
        activateNav();
    });
});