滚动和单击时添加活动类

Question

我希望有人能够帮助我编写代码，我想在滚动时添加活动类，而不仅仅是通过单击。我怎样才能在我的代码上做到这一点。我不擅长 javascript 或 jquery。非常感谢

jQuery(document).ready(function($) {

  //you can now use $ as your jQuery object.
  $('div p').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  })

  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="article-links">
  <p class="active"><a href="#link-one">US Dollar rates and purchasing power are in all time low</a></p>
  <p><a href="#link-two">Huge institutional interest</a></p>
  <p><a href="#link-three">Strong fundamental growth and usage on overall blockchain ecosystem</a></p>
</div>

Answer 1

您的代码有效。如果有明显的变化，它可能会更加明显。我已经为活动类设置了样式以增加字体大小。

jQuery(document).ready(function($) {

  //you can now use $ as your jQuery object.
  $('div p').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  })

  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
});

.active {
font-size: 24px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="article-links">
  <p class="active"><a href="#link-one">US Dollar rates and purchasing power are in all time low</a></p>
  <p><a href="#link-two">Huge institutional interest</a></p>
  <p><a href="#link-three">Strong fundamental growth and usage on overall blockchain ecosystem</a></p>
</div>