0

ページ全体が更新されるのではなく、ナビゲーション バーのリンクの 1 つをクリックするとサブ ナビゲーションのみが変更されるサブ ナビゲーションを作成するにはどうすればよいか考えていました。

http://jsfiddle.net/qrn8Q/

ありがとうございました。

HTML コード:

    <header class="header">
    <div class="container">
        <div class="header-primary_container">
            <a class="header_brand" href="#"></a>
            <div class="navigation-primary_right">
                <div class="navigation-primary">
                    <nav class="navigation-primary_links">  <a href="" class="nav_icon selected">Home</a>
                        <a href="" class="nav_icon">Designs</a>
                        <a href="" class="nav_icon">About Us</a>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>
<nav class="sub_nav">
    <a href="index.php" class="sub_nav_icon">Home</a>
    <a href="index.php" class="sub_nav_icon">Sign in</a>
    <a href="index.php" class="sub_nav_icon">Sign up</a>
</nav>
</div>
4

2 に答える 2

0

これは jQuery で実現できます。私のコードをチェックしてください。それはとてもシンプルで簡単です：

http://jsfiddle.net/mELsr/

$('.nav_icon').click(function() {
    $('nav.sub_nav:visible').fadeOut(300); // 1
    $('.selected').removeClass('selected'); // 2
    var classKey = $(this).attr('id'); // 3
    $('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
    $(this).addClass('selected'); // 5
    return false; // 6
});

簡単に言えば、 のいずれかがクリックされるたびに、.nav_icon表示されているものがフェードアウトし(1)、選択された からクラスがsub_nav削除されます (2)。クリックされた項目の id 属性を取得し (3)、それに関連する属性を見つけてフェードインし (4) 、クリックされた項目にクラスを追加します (5)。最後に、リンクのデフォルトの動作を無視します (6)。.selected.nav_iconsub_nav.selectedreturn false;

始めるのに役立つことを願っています。

于 2013-08-18T14:50:46.173 に答える