如何在单个页面中使用 jquery 滚动到保持锚点活动属性

Question

我正在开发一个主页，我需要我的主导航锚点来保持 CSS 中分配的活动颜色的样式。我遇到的问题是我正在使用 jQuery 滚动函数，因此一旦单击锚点，相应的div 就会向上/向下滚动/等。它都在一个 HTML 文件中。我希望主导航中的锚点保持活动颜色，直到单击另一个链接。我的代码示例如下：

function goToByScroll(id){
    $('html,body').animate({scrollTop:$("#"+id).offset().top -315},'slow');}
<div id="mainnav">
        <ul>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('main_content')">HOME</a></li>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('page2')">WHY</a></li>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('page6')">FEATURES</a></li>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('gallery')">GALLERY</a></li>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('page4')">DEMO</a></li>
            <li>
                <a href="javascript:void(0)" onclick="goToByScroll('page5')">CONTACT US</a></li>
        </ul>
    </div>
#mainnav{
     height:50px;
     background-color:#FFF;
     float:right;
     font-size:18px;
     font-family: Arial, Helvetica, sans-serif;}
  #mainnav a, #mainnav a:link, #mainnav a:visited, {
  color:#444444;
  text-decoration: none;
  }
   #mainnav a:hover { text-decoration: none; color:#BAB9B9;}
    #mainnav a:active{
    color:#f69512;
    text-decoration: none;}

#page2{
    clear:both;
    min-width:990px;
    background-color:#c8c8c8;
    min-height:600px;
    top:380px;
    bottom:65px;

}

Answer 1

单击链接时，请为其指定一个具有相同外观属性（如活动状态）的类。

当您单击另一个链接时，从所有链接中离开此类并将其添加到单击的链接中。

您可以保留 onclick 属性，只需声明如下事件：

$(function(){
  $('a', '#mainnav').on('click', function(){
    $('a', '#mainnav').removeClass('imactive');
    $(this).addClass('imactive');
    return false;
  })
})