子导航栏

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

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

Answer 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）并从.selected删除.nav_icon类。选中（2）。获取单击项的id属性（3）并找到与其相关的sub_nav并将其淡入（4），然后将.selected类添加到单击的项目（5）。在最后return false;，以忽略链接默认行为（6）。

希望它可以帮助你开始。