平滑滾動導航-將類添加到活動鏈接

Question

我已經實現了基本的平滑滾動以定位到我的導航列表。

 jQuery(function() { jQuery('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'') && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); if (target.length) { jQuery('html, body').animate({ scrollTop: target.offset().top }, 500); return false; } } }); }); 

 html, body{ margin:0; padding:0; } #navigation{ position:fixed; background:wheat; width:100%; top:0; } #navigation li{ display:inline; } .item1, .item2, .item3, .item4{ height:500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navigation"> <li><a href="#item1_anchor">Item 1</a></li> <li><a href="#item2_anchor">Item 2</a></li> <li><a href="#item3_anchor">Item 3</a></li> <li><a href="#item4_anchor">Item 4</a></li> </ul> <div class="item1"> <a class="anchor" id="item1_anchor"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lorem scelerisque, scelerisque felis bibendum, gravida tellus. Praesent ut tristique tellus. Curabitur at risus sed risus cursus imperdiet. Etiam ac lorem eget tortor dictum feugiat id sit amet metus. Fusce bibendum pharetra odio vel auctor. Donec mattis imperdiet euismod. Morbi ac convallis dolor. Pellentesque dui est, consequat sed ante nec, ultricies volutpat enim. Donec vitae pulvinar dolor, at semper mi. Donec gravida a dolor ac blandit. Donec vel urna at purus tincidunt sodales. Maecenas laoreet elit at turpis sodales scelerisque. Phasellus sem urna, viverra sed odio ut, auctor sodales neque. </div> <div class="item2"> <a class="anchor" id="item2_anchor"></a> Praesent interdum commodo accumsan. Etiam neque est, luctus ut finibus eu, lobortis id velit. Nullam id mi aliquam, aliquam dolor pellentesque, laoreet sem. Fusce suscipit erat at laoreet pulvinar. Pellentesque venenatis blandit ipsum in venenatis. Aenean at eros felis. Etiam fermentum vehicula consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sagittis sem vel dui consectetur hendrerit. Nulla fermentum dignissim dolor, in sollicitudin sem dictum in. Maecenas non mi justo. Aenean id commodo ipsum. </div> <div class="item3"> <a class="anchor" id="item3_anchor"></a> Nunc condimentum risus bibendum lacinia ultrices. Suspendisse potenti. Phasellus scelerisque gravida diam, consectetur fermentum augue suscipit non. Phasellus ut augue ornare, congue sapien sed, cursus dui. Morbi congue dapibus felis, eu dapibus risus ornare nec. Proin eleifend enim et eros posuere posuere non blandit lacus. Quisque at lectus diam. Morbi facilisis accumsan diam ut tincidunt. Donec in tempus orci, eleifend convallis metus. Phasellus cursus magna nec purus varius, vitae cursus neque porta. Mauris malesuada dictum enim ut lobortis. Praesent porta metus eget efficitur aliquet. Duis vehicula augue a lorem interdum sollicitudin. </div> <div class="item4"> <a class="anchor" id="item4_anchor"></a> Aliquam erat volutpat. Nulla sed mauris tellus. Pellentesque tristique eros ac urna faucibus vestibulum. Vivamus ac ante eget ante maximus commodo a vitae diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum nulla a molestie fringilla. Sed pharetra ac diam in facilisis. Sed ut ligula eu augue fermentum dictum. Suspendisse non accumsan enim, eget facilisis diam. Morbi a sapien at metus vulputate egestas id quis ante. </div> 

一切正常，但我現在想向活動鏈接添加一個類，以便在導航菜單中為其設置樣式。

有人舉個例子嗎？

Answer 1

將點擊的元素保存在.animate()之外，則可以添加或刪除類

 jQuery(function() { jQuery('a[href*="#"]:not([href="#"])').click(function() { if(location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']'); if(target.length) { var activeLink = this; jQuery('html, body').animate({ scrollTop: target.offset().top }, 500, function() { jQuery('a[href*="#"]:not([href="#"])').removeClass('activeLink'); jQuery(activeLink).addClass('activeLink') }); return false; } } }); }); 

 html, body { margin: 0; padding: 0; } #navigation { position: fixed; background: wheat; width: 100%; top: 0; } #navigation li { display: inline; } .item1, .item2, .item3, .item4 { height: 500px; } .activeLink { background: orange; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navigation"> <li><a href="#item1_anchor">Item 1</a></li> <li><a href="#item2_anchor">Item 2</a></li> <li><a href="#item3_anchor">Item 3</a></li> <li><a href="#item4_anchor">Item 4</a></li> </ul> <div class="item1"> <a class="anchor" id="item1_anchor"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lorem scelerisque, scelerisque felis bibendum, gravida tellus. Praesent ut tristique tellus. Curabitur at risus sed risus cursus imperdiet. Etiam ac lorem eget tortor dictum feugiat id sit amet metus. Fusce bibendum pharetra odio vel auctor. Donec mattis imperdiet euismod. Morbi ac convallis dolor. Pellentesque dui est, consequat sed ante nec, ultricies volutpat enim. Donec vitae pulvinar dolor, at semper mi. Donec gravida a dolor ac blandit. Donec vel urna at purus tincidunt sodales. Maecenas laoreet elit at turpis sodales scelerisque. Phasellus sem urna, viverra sed odio ut, auctor sodales neque. </div> <div class="item2"> <a class="anchor" id="item2_anchor"></a> Praesent interdum commodo accumsan. Etiam neque est, luctus ut finibus eu, lobortis id velit. Nullam id mi aliquam, aliquam dolor pellentesque, laoreet sem. Fusce suscipit erat at laoreet pulvinar. Pellentesque venenatis blandit ipsum in venenatis. Aenean at eros felis. Etiam fermentum vehicula consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sagittis sem vel dui consectetur hendrerit. Nulla fermentum dignissim dolor, in sollicitudin sem dictum in. Maecenas non mi justo. Aenean id commodo ipsum. </div> <div class="item3"> <a class="anchor" id="item3_anchor"></a> Nunc condimentum risus bibendum lacinia ultrices. Suspendisse potenti. Phasellus scelerisque gravida diam, consectetur fermentum augue suscipit non. Phasellus ut augue ornare, congue sapien sed, cursus dui. Morbi congue dapibus felis, eu dapibus risus ornare nec. Proin eleifend enim et eros posuere posuere non blandit lacus. Quisque at lectus diam. Morbi facilisis accumsan diam ut tincidunt. Donec in tempus orci, eleifend convallis metus. Phasellus cursus magna nec purus varius, vitae cursus neque porta. Mauris malesuada dictum enim ut lobortis. Praesent porta metus eget efficitur aliquet. Duis vehicula augue a lorem interdum sollicitudin. </div> <div class="item4"> <a class="anchor" id="item4_anchor"></a> Aliquam erat volutpat. Nulla sed mauris tellus. Pellentesque tristique eros ac urna faucibus vestibulum. Vivamus ac ante eget ante maximus commodo a vitae diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum nulla a molestie fringilla. Sed pharetra ac diam in facilisis. Sed ut ligula eu augue fermentum dictum. Suspendisse non accumsan enim, eget facilisis diam. Morbi a sapien at metus vulputate egestas id quis ante. </div> 

Answer 2

將以下代碼添加到您的函數中，

jQuery('#navigation').find('a').removeClass('active');
jQuery(this).addClass('active');

並為活動類添加CSS

jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    jQuery('#navigation').find('a').removeClass('active');
    jQuery(this).addClass('active');
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});