0

クリックするとスクロールトップを使用してナビゲートする、すべてのliタグのシンプルなメニューを作成しようとしています。

<div class="menu" id="menu1">
   <ul>
    <li class="button1">Section1</li>
    <li class="button2">Section2</li>
    <li class="button3">Section3</li>
    <li class="button4">Section4</li>
    <li class="button5">Section5</li>
   </ul>
</div>

$(".button1").click(function() {

    $('html, body').animate({
        scrollTop: $('.section1').offset().top-55
    });
});

問題は、同じロジックを使用する必要があるが異なるセクションに適用する必要があるいくつかの部分があるため、主にそれぞれに個別のコードを書きたくないということです。むしろ、各メニューに適用されるコードでこれを解決できます。質問することがたくさんあることは知っていますが、私はこれにかなり慣れていません。

4

1 に答える 1

0

class各<li>要素に共通のものを使用します。クラスがあるようですが、それらは一意であり、おそらく ID である必要があります。たとえば、共有できる一般的なクラスは でありmenuButton、関数は次のようになります。

$(".menuButton").click(function() {
    //var elementID = this.id <--Optional variable containing the clicked element ID

    //Sample logic
    //if (elementID == "button1") { animate this way } )
    $('html, body').animate({
        scrollTop: $('.section1').offset().top-55
    });
});

変更された HTML:

<div class="menu" id="menu1">
    <ul>
        <li id="button1" class="menuButton">Section1</li>
        <li id="button2" class="menuButton">Section2</li>
        <li id="button3" class="menuButton">Section3</li>
        <li id="button4" class="menuButton">Section4</li>
        <li id="button5" class="menuButton">Section5</li>
    </ul>
</div>
于 2013-07-02T22:39:03.790 に答える