0

ここにフィドルがあります。

この質問でレスポンシブ ナビゲーション メニューの作成に関する問題が説明されているため、2 つの同一のナビゲーション要素が必要です。

.activeただし、両方のクラスを同時に追跡して適用するには、scrollspy を使用したいと思います。簡単にするために、次のような 2 つの同一のナビゲーションがあるとします。

<div class="scrollspy navbar">
    <nav class="nav">
        <li><a href="#option1">Option 1</a></li>
        <li><a href="#option2">Option 2</a></li>
        <li><a href="#option3">Option 3</a></li>
        <li><a href="#option4">Option 4</a></li>
        <li><a href="#option5">Option 5</a></li>
    </nav>
</div>

そして、内容：

<div class="content">
    <section id="option1">1</section>
    <section id="option2">2</section>
    <section id="option3">3</section>
    <section id="option4">4</section>
    <section id="option5">5</section>
</div>

そして、scrollspy を呼び出します。

$(".wrapper").scrollspy({ target: ".scrollspy" });

アクティブなクラスが台無しになり、両方のナビゲーションで前後にちらつくことがフィドルでわかります。scrollspyただし、いずれかのナビゲーションからクラスを削除すると、もう一方のナビゲーションは正常に機能します。これは修正可能ですか？

4

4 に答える 4

3

これが私の友人の修正です。少し口が悪いので、もっと簡単な修正がある場合は、先に進んでください。とりあえずこれで治ります。

$(document).ready(function () {
    $(".wrapper").scrollspy({ target: ".scrollspy" });

    var scollSpy2ActiveLI = "";

    $('.wrapper').on('activate.bs.scrollspy', function () {
        if (scollSpy2ActiveLI != "") {
            scollSpy2ActiveLI.removeClass('active');            
        }        
        var activeTab = $('.scrollspy li.active a').attr('href');
        scollSpy2ActiveLI = $('.scrollspy2 li a[href="' + activeTab + '"]').parent();
        scollSpy2ActiveLI.addClass('active');
    })

    $('.wrapper').trigger('activate.bs.scrollspy');
});

.scrollspy22 番目のナビゲーションに使用していることに注意してください。

これがフィドルです：http://jsfiddle.net/jofrystanto/MUpz5/1/

于 2013-09-20T01:02:05.353 に答える
0

クラスの代わりに id を使用します。

$(".wrapper").scrollspy({ target: "#scrollspy" });
于 2017-01-05T14:33:37.123 に答える
0

空のターゲットを指定すると、すべてのナビゲーションが機能します: https://stackoverflow.com/a/23937735

自分でテストしただけです。驚くべき解決策。

于 2016-11-30T23:46:32.570 に答える