javascript - 使用 jQuery 设计单页网站

Question

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

页面 div 也在 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 实现这一点？

Answer 1

这就是您要找的内容

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