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>

我有一些div id="intro"，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");
  });
});

完整的小提琴：

＆＃13;

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

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

有关详细信息，请查看Bootstrap ScrollSpy。

当div显示时，激活jQuery导航栏上的标签

1 个答案: