html - 子导航栏

Question

我想知道如何制作一个子导航，一旦我点击导航栏中的一个链接而不是整个页面刷新，如果你能帮助我，只有子导航会改变

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>

Answer 1

您可以使用 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单击 's 中的一个时，淡出可见的（1）并从所选的（2）中sub_nav删除.selected类。.nav_icon获取被点击项目的 id 属性 (3) 并找到sub_nav与之相关的并将其淡入 (4)，然后将.selected类添加到被点击项目 (5)。最后return false;为了忽略链接默认行为（6）。

希望它可以帮助您入门。

Answer 2

What you need to do is to use either Ajax or iFrame. For onclick event of those links, you can write your javascript codes to load the new content.