0

CSSで割り当てられたアクティブな色のスタイルを維持するために、メインのナビゲーションアンカーが必要なホームページに取り組んでいます。私が抱えている問題は、jQuery スクロール機能を使用しているため、アンカーをクリックすると、対応する div が上下にスクロールすることです。すべてが 1 つの 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 に答える