javascript - 使用jQuery设计单页网站

以下是我正在做的单页网站的伪代码。我需要能够制作不是基于滚动的单页网站（这是典型的）。这里的想法是，我的站点有一个nav，用户可以在其中选择菜单，并根据所选菜单在内容div上呈现正确的页面div。

page divs也在HTML中，除非选择了正确的菜单（或者如果更好的方法是将页面放在Javascript文件中），则不应显示：

<nav>
 <ul>
   <li>menu1</li>
   <li>menu2</li>
 </ul>
</nav>

<div id="content">
  <!-- content will be from page divs below -->
</content>

<div id="page1"> <!-- for menu1 -->
 <div>the content</div>
</div>

<div id="page2"> <!-- for menu2 -->
 <div>the content</div>
</div>

jQuery如何实现呢？

最佳答案

这是你要找的

HTML：-

<nav>
    <ul>
    <li class="nav active" data-id="1">menu1</li>
    <li class="nav" data-id="2">menu2</li>
    </ul>
</nav>
<div id="content">
    <!-- content will be from page divs below -->
    <div id="page1" class="page">
    <!-- for menu1 -->
    <div>the content from page 1</div>
    </div>
    <div id="page2" class="hide page">
    <!-- for menu2 -->
    <div>the content from page2</div>
    </div>
</div>

jQuery的：-

$(document).ready(function () {

    $('.nav').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.page').hide();
        var clickedId = $(this).data('id');
        $('#page' + clickedId).show();
    });


});

Working Demo

关于javascript - 使用jQuery设计单页网站，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19970185/