0

我正在一个主页上工作，我需要我的主导航锚来保持 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;

}

4

1 回答 1

0

当您单击链接时，给它一个具有相同外观属性的类，如活动状态。

当您单击另一个链接时，请从所有链接中退出该类并将其添加到单击的链接中。

您可以保留 onclick 属性并像这样声明事件：

$(function(){
  $('a', '#mainnav').on('click', function(){
    $('a', '#mainnav').removeClass('imactive');
    $(this).addClass('imactive');
    return false;
  })
})
于 2012-10-11T21:52:43.037 回答