Question

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

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

我希望我所有使用#dinos_trex，＃diinos_raptor，＃dicos_triceratops等部分ID的部分继续使导航ID = #dinos_在导航中保持活动状态。

经过进一步的研究，有人能用“课程”编写代码吗？让我们说一组div共享一个类名，在这种情况下“dinos_”如果用户在“任何”相关的“dinos_”部分，我如何为一个导航项设置一个活动状态???? < / p>

这是当前的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');
    }
  });
});

我猜这段代码特别是我需要有人帮我重新定义？

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>

Answer 1

使用航点插件： http://imakewebthings.com/waypoints/

<强>已更新

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>

这是一个小提琴： http://jsfiddle.net/4qwawrgx/

Answer 2

更改此代码

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();
    });
});

使一个NAV链接在多个部分中有效（使用类???）

2 个答案: