如何将活动类添加到列表“href”中，该列表在视口部分“data-nav”中显示。

Question

我是javascript语言的新手，而且我被我的代码卡住了，对如何解决我的问题没有任何想法，而且如果我不能解释问题，我提前表示歉意。

您可以找到我的app.js文件，我创建了一个页面部分的动态列表，但我尝试了很多方法，并观看了很多教程，介绍如何将一个活动类添加到所需列表中，它的href具有与视口中显示的部分相同的数据导航

null

// select all sections
const sections = document.querySelectorAll('section');

// select the navbar id
const navBar = document.getElementById('navbar__list');

// create a document fragment to hold all the lists
const frag = document.createDocumentFragment();

/**
 * End Global Variables
 * Start Helper Functions
 *
 */

/**
 * End Helper Functions
 * Begin Main Functions
 *
 */

// build the nav

for (let section of sections) {
  const sectionId = section.getAttribute('id');
  const sectionTitle = section.getAttribute('data-nav');
  const list = document.createElement('li');
  const links = document.createElement('a');

  // construct the li's
  links.setAttribute('href', `#${sectionId}`);
  links.innerText = sectionTitle;
  list.appendChild(links);
  links.classList = 'menu__link';
  frag.appendChild(list);

  // add event listener for smooth scroll
  links.addEventListener('click', function(event) {
    event.preventDefault();
    window.scrollTo({
      top: section.offsetTop - 60,
      behavior: 'smooth'
    });
  });
};
navBar.appendChild(frag);

// select the a tags inside navbar
const allLinks = navBar.querySelectorAll('a');


/* // Add class 'active' to section when near top of viewport */
// Get the Top of the section
function sectionView(section) {
  return section.getBoundingClientRect().top;
}


// Remove Active Class of all sections
function removeActiveClass(section) {
  return section.classList.remove('your-active-class');
}

// Add Active Class to the required section
function addActiveClass(is_inview, section) {
  if (is_inview) {
    section.classList.add('your-active-class');
  };
}


// combine functions //
const activeSection = () => {
  sections.forEach(section => {
    const itemView = sectionView(section);
    viewport = () => itemView > -200 && itemView <= 400;
    removeActiveClass(section);
    addActiveClass(viewport(), section);
  });
};

// add eventlistener to window
window.addEventListener('scroll', activeSection);

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- HTML Follows BEM naming conventions 
  IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
  <nav class="navbar__menu">
    <!-- Navigation starts as empty UL that will be populated with JS -->
    <ul id="navbar__list"></ul>
  </nav>
</header>
<main>
  <header class="main__hero">
    <h1>Landing Page </h1>
  </header>
  <!-- Each Section has an ID (used for the anchor) and 
    a data attribute that will populate the li node.
    Adding more sections will automatically populate nav.
    The first section is set to active class by default -->
  <section id="section1" data-nav="Section 1" class="your-active-class">
    <div class="landing__container">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section2" data-nav="Section 2">
    <div class="landing__container">
      <h2>Section 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section3" data-nav="Section 3">
    <div class="landing__container">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>

  <!-- Add new sections  -->
  <section id="section4" data-nav="Section 4">
    <div class="landing__container">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section5" data-nav="Section 5">
    <div class="landing__container">
      <h2>Section 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
</main>
<footer class="page__footer">
  <p>&copy Udacity</p>
</footer>

null

Answer 1

在这里，您可以在functionsaddActiveClass/removeActiveClass函数中添加/删除类，例如：

//Add class
navBar.querySelector('li a[href*="#'+section.getAttribute('id')+'"]').classList.add('your-active-class');

//Remove Class
navBar.querySelector('li a[href*="#'+section.getAttribute('id')+'"]').classList.remove('your-active-class');

注意：我在菜单中添加了一些CSS，只是为了测试的目的让它变得清晰。

工作样本：

null

// select all sections
const sections = document.querySelectorAll('section');

// select the navbar id
const navBar = document.getElementById('navbar__list');

// create a document fragment to hold all the lists
const frag = document.createDocumentFragment();

/**
 * End Global Variables
 * Start Helper Functions
 *
 */

/**
 * End Helper Functions
 * Begin Main Functions
 *
 */

// build the nav

for (let section of sections) {
  const sectionId = section.getAttribute('id');
  const sectionTitle = section.getAttribute('data-nav');
  const list = document.createElement('li');
  const links = document.createElement('a');

  // construct the li's
  links.setAttribute('href', `#${sectionId}`);
  links.innerText = sectionTitle;
  list.appendChild(links);
  links.classList = 'menu__link';
  frag.appendChild(list);

  // add event listener for smooth scroll
  links.addEventListener('click', function(event) {
    event.preventDefault();
    window.scrollTo({
      top: section.offsetTop - 60,
      behavior: 'smooth'
    });
  });
};
navBar.appendChild(frag);

// select the a tags inside navbar
const allLinks = navBar.querySelectorAll('a');


/* // Add class 'active' to section when near top of viewport */
// Get the Top of the section
function sectionView(section) {
  return section.getBoundingClientRect().top;
}


// Remove Active Class of all sections
function removeActiveClass(section) {
  navBar.querySelector('li a[href*="#'+section.getAttribute('id')+'"]').classList.remove('your-active-class');
  return section.classList.remove('your-active-class');
}

// Add Active Class to the required section
function addActiveClass(is_inview, section) {
  if (is_inview) {
    section.classList.add('your-active-class');
    navBar.querySelector('li a[href*="#'+section.getAttribute('id')+'"]').classList.add('your-active-class');
  };
}


// combine functions //
const activeSection = () => {
  sections.forEach(section => {
    const itemView = sectionView(section);
    viewport = () => itemView > -200 && itemView <= 400;
    removeActiveClass(section);
    addActiveClass(viewport(), section);
  });
};

// add eventlistener to window
window.addEventListener('scroll', activeSection);

li a.your-active-class{
    color: green;
}

.navbar__menu{
    position: fixed;
    background: white;
    float: right;
    width: 100%;
    left: 500px;
}

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- HTML Follows BEM naming conventions 
  IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
  <nav class="navbar__menu">
    <!-- Navigation starts as empty UL that will be populated with JS -->
    <ul id="navbar__list"></ul>
  </nav>
</header>
<main>
  <header class="main__hero">
    <h1>Landing Page </h1>
  </header>
  <!-- Each Section has an ID (used for the anchor) and 
    a data attribute that will populate the li node.
    Adding more sections will automatically populate nav.
    The first section is set to active class by default -->
  <section id="section1" data-nav="Section 1" class="your-active-class">
    <div class="landing__container">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section2" data-nav="Section 2">
    <div class="landing__container">
      <h2>Section 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section3" data-nav="Section 3">
    <div class="landing__container">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>

  <!-- Add new sections  -->
  <section id="section4" data-nav="Section 4">
    <div class="landing__container">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
  <section id="section5" data-nav="Section 5">
    <div class="landing__container">
      <h2>Section 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis.
        Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam
        porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>

      <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
        tortor, eget elementum tortor mollis non.</p>
    </div>
  </section>
</main>
<footer class="page__footer">
  <p>&copy Udacity</p>
</footer>