1

私のサイトhttp://www.iancockram.comは 1 ページのポートフォリオです。私が解決しようとしている問題は、アクティブなメニュー ボタンを強調表示したいということです。

私はそれを設定しようとしましたが、決して機能させることはできません..

    **JQUERY**
    //scrollTo
    $(document).ready(function(){
    $('nav ul li a').click(function(){
    var el = $(this).attr('href');
    var elWrapped = $(el);
    scrollToDiv(elWrapped, 86);
    return false;
    });

    function scrollToDiv(element,navheight){
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight;
    $('body,html').animate({
            scrollTop: totalScroll
    }, 500);
    }
    });//scrollTo end


    **HTML**
    <nav>
    <ul id="top-menu">
      <div id="logo"><img src="furniture/logo.png" width="242" height="90" alt="iancockram.com" title="iancockram.com"></div>
      <li class="button"> <span class="menutext"><a href="#contact">Contact</a></span></li>
      <li class="button"> <span class="menutext"><a href="#extra">Extra</a></span></li>
      <li class="button"> <span class="menutext"><a href="#portfolio">Portfolio</a></span></li>
      <li class="button"> <span class="menutext"><a href="#about">About</a></span></li>
    </ul>

}

4

4 に答える 4

0

onclickイベントを機能させることができました!!!

そして、window.scroll 関数でメニュー項目を強調表示するというアイデアに基づいています。

divを渡すとアラートが表示されました。しかし、複数の div を渡してスタイルに影響を与える場合、どのようにコーディングすればよいでしょうか?

$(function(){
  $(window).scroll(function(){
    var aPortfolio = $('.portfoliowrapper').height();
    if($(this).scrollTop()>=aPortfolio){
        alert('portfolio just passed.');
    }
  });
});
于 2013-04-08T00:27:08.457 に答える
0

クリックする Css クラスを追加します このように:-

$(document).ready(function(){
    $('nav ul li a').click(function(){
    $('nav ul li a').removeClass();
    $(this).addClass('active');
    return false;
   });
});
于 2013-04-02T11:48:40.637 に答える
0

まず、:hover に使用するのと同じスタイルを、クリックされた要素に追加する必要があります。

スクロール時にもメニュー項目をハイライトしたい場合は、$(window).scroll() イベントをセットアップして、高さが div の 1 つの上下の間にあるかどうかを確認し、前述と同じスタイルを適用する必要があります。

于 2013-04-02T11:47:01.753 に答える