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;
  })
})

如何在单页面中使用jquery scroll-to保持锚点活动属性

1 个答案: