子导航栏答案

【问题标题】：Sub-navigation bar子导航栏
【发布时间】：2013-08-18 22:50:46
【问题描述】：

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

谢谢。

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>

【问题讨论】：

标签： html css navigation

【解决方案1】：

您需要做的是使用 Ajax 或 iFrame。对于这些链接的 onclick 事件，您可以编写 javascript 代码来加载新内容。

【讨论】：

感谢您的努力，但并没有真正帮助。

【解决方案2】：

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

希望它可以帮助您入门。

【讨论】：