0

単一ページの Web サイトを使用していますが、対応するコンテンツに到達したときにナビゲーション アイテムを強調表示するのに問題があります。ここで、コードを単純化します。

HTML:

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">Lorem ipsum</div>
<div id="about">Lorem ipsum</div>
<div id="blog">Lorem ipsum</div>
<div id="contact">Lorem ipsum</div>

脚本：

$(document).ready(function() {
    // function that scrolls automatically to the content of a certain menu item. Just 
    // like scroll-to.js

    // .scroll event that automatically sets the "current" class to the list item when
    // when it reached its corresponding div.
});

これは、ページを上下にスクロールするだけで完全に機能します。問題は、リスト項目をクリックしたときです。たとえば、現在強調表示されているアイテムは「ホーム」であり、クリックして「連絡先」に移動したいとします。強調表示は .scroll イベントで操作されるため、[ホーム] と [連絡先] の間の 2 つのボタンも強調表示されます。これは、クリックが [ホーム] から [連絡先] に移動するためです。

間にある項目を無視する方法はありますか? ありがとう。

4

1 に答える 1

0

クリック イベントからスクロール イベントをトリガーするときに、別の名前空間を持つハンドラーを使用する

$('li').on('click', function(){
  $(window).trigger('scroll.autoscroll');
});

$(window).on('scroll.autoscroll', function(){
  //whatever you want to happen on a scroll event triggered by a click event
});

または、.trigger メソッドを使用して、次のようにデータをイベント ハンドラーに渡すことができます。 $(window).trigger('scroll', pass_some_data); 次に、渡されたデータに基づいて、イベント ハンドラーが何をすべきかを決定します。

それが役立つことを願っています。基本的にコメント行を含む空の関数を投稿しただけなので、これ以上具体的に言うことはできません。

于 2013-06-14T04:20:21.977 に答える