0

すべての情報が同じページに表示されるシンプルなメニュー設定を作成しました。そのタブが選択されるまで、ほとんどの情報が非表示になっています。私が使用しているフィルター JS はこれでうまく機能しますが、何らかの理由で (CHROME のみ)、メニュー項目 (場所、ヘルプなど) をクリックすると、画面が数百ピクセル飛び出します (選択した情報がうまく表示されます)。けれど）。奇妙なことに、これはページが更新され、アイテムが初めてクリックされたときにのみ発生します。その後、すべてがうまくいきます！

以下は関連するコードですが、実際の動作を確認するには、テスト サイトを参照してください。

フィルターに使用しているJSは次のとおりです。

    $(document).ready(function() {
    $('#nav a').click(function() {
        $('#nav a.current').removeClass('current');
        $(this).addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','');

        $('#content div').each(function() {
            if(!$(this).hasClass(filterVal)) {
                    $(this).hide().addClass('hidden');
            } else {
                $(this).show().removeClass('hidden');
            }
        });
    return false;
    });
});

HTML メニューと情報を次のように使用します。

<ul id=nav>
<a href="#" class="current"><li>Mission</li></a>
<a href="#"><li>Location</li></a>
<a href="#"><li>Help</li></a>
<a href="#"><li>Vendors</li></a>        
</ul>


        <div id=content>
        <div class=mission>
            <img src="./images/roosters.jpg">
            <h2>The Mission</h2>
            <p>...</p>
        </div>

        <div class=location>
            <img src="./images/old_market.jpg">
            <h2>Our Location</h2>
            <p>...</p>
        </div>

        <div class=help>
            <img src="./images/helpers.jpg">
            <h2>Get Involved</h2>
            <p>...</p>
        </div>

        <div class=vendors>
            <img src="./images/artisans.jpg">
            <h2>Our Vendors</h2>
            <p>...</p>
        </div>          

    </div>
4

1 に答える 1

0

それはhref="#"アンカータグにあり、ページの上部を指しています。preventDefault()クリック ハンドラーにを追加することをお勧めします。詳細はこちらをご覧ください。

于 2012-09-26T20:04:52.967 に答える