jquery - 显示 div 时激活 jQuery 导航栏上的选项卡

Question

我的网站是一个长长的向下滚动页面。我有一个导航元素:

<nav>
    <ul class="menu list-unstyled">
        <li id="cena1" class="activate">
            <a href="#intro">Home</a>
        </li>
        <li class="">
            <a href="#about">Empresa</a>
        </li>
        <li class="">
            <a href="#services">Serviços</a>
        </li>
        <li class="">
            <a href="#works">Galeria</a>
        </li>
        <li class="">
            <a href="#contact">Contactos</a>
        </li>
    </ul>
</nav>

我有一些带有 id="intro" 的 div , id="about" , id="services" , id="works" , id="contact" .我想要的是:当我用鼠标向下滚动时，例如至 <div id="about"> ，对应li与 href=#about应该得到 class="activate" (其他人应该失去这个)。

Answer 1

使用这个:

$(function () {
  $(".menu li a").click(function () {
    $(".menu li").removeClass("activate");
    $(this).closest("li").addClass("activate");
  });
});

完整的 fiddle :

$(function () {
  $(".menu").scrollspy({
    min: $('#nav').offset().top,
    onEnter: function(element, position) {
      $(".menu").addClass('fixed');
    },
    onLeave: function(element, position) {
      $(".menu").removeClass('fixed');
    }
  });
});

* {text-decoration: none; font-family: 'Segoe UI';}

.fixed {position: fixed;}

.menu {display: block;}
.menu li {display: block;}
.menu li a {display: block; color: #99f;}
.menu li.activate a {color: #f33;}

.content-tab {min-height: 800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/sxalexander/jquery-scrollspy/master/jquery-scrollspy.js"></script>
<nav>
  <ul class="menu list-unstyled">
    <li id="cena1" class="activate">
      <a href="#intro">Home</a>
    </li>
    <li class="">
      <a href="#about">Empresa</a>
    </li>
    <li class="">
      <a href="#services">Serviços</a>
    </li>
    <li class="">
      <a href="#works">Galeria</a>
    </li>
    <li class="">
      <a href="#contact">Contactos</a>
    </li>
  </ul>
</nav>
<div id="content">
  <div id="intro" class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, praesentium similique dolor fugit excepturi adipisci quisquam, animi iusto impedit odio saepe cumque consequuntur labore corrupti nisi minus iure illo! Doloribus.</div>
  <div id="about" class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nisi! Libero id ipsa ullam, vel atque itaque, quos aperiam minima iusto, doloremque earum. Perspiciatis corporis ipsa quibusdam animi officia molestias!</div>
  <div id="services" class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam et, sapiente laboriosam consequuntur mollitia quia, neque reiciendis quasi placeat, eveniet sit beatae explicabo voluptates laudantium, nobis omnis esse! Debitis.</div>
  <div id="works" class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati itaque dolores illum accusamus temporibus explicabo aspernatur, dicta expedita ipsam doloremque, tenetur, officia rem at, aperiam fugiat culpa voluptates quisquam porro!</div>
  <div id="contact" class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit sequi, odit asperiores. Explicabo natus sequi fugiat optio. Eum mollitia reiciendis illo doloribus nobis beatae modi, cumque! Ut voluptatibus repellat excepturi.</div>
</div>

有关更多信息，请查看 Bootstrap ScrollSpy .