jQuery中的单页网站菜单

Question

我对这样的jQuery菜单感兴趣，以便将我网站的所有信息保存在一个页面上。 （示例：http://www.imagesup.net/?di=614084454059）我不知道如何定义这样的菜单，能帮帮我吗？

Answer 1

最简单的例子如何完成（尽管还有其他各种方法）：

JSFIDDLE LIVE DEMO

HTML

<div class="wrapper">
    <nav>
        <ul>
            <li data-toggle-class="home">Home</li>
            <li data-toggle-class="about">About</li>
            <li data-toggle-class="contact">Contact</li>
        </ul>
    </nav>
    <section class="home">
        <p>This is a home section</p>
    </section>
    <section class="about">
        <p>This is an about section</p>
    </section>
    <section class="contact">
        <p>This is a contact section</p>
    </section>
</div>

的jQuery

$(".wrapper li").click(function(){
    var classToToggle = $(this).data("toggle-class");
    $(".wrapper section").css("display", "none");
    $("." + classToToggle).css("display", "block");
});

编辑：

JSFIDDLE的一点styled version