使用 jQuery 设计单页网站答案

【问题标题】：Design a single page website with jQuery使用 jQuery 设计单页网站
【发布时间】：2013-11-14 05:24:41
【问题描述】：

下面是我正在做的单页网站的伪代码。我需要能够制作一个不基于滚动的单页网站（这是典型的）。这里的想法是我的网站有一个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 实现这一点？

【问题讨论】：

问题是？
您可以使用 ajax 在单个页面上加载不同的内容。

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案2】：

要在不同的容器中显示预加载的内容，您可以使用带有一些 CSS 的锚标记

HTML

<a href="#page1">a</a>
<a href="#page2">b</a>
<a href="#page3">c</a>

<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>

CSS

#page1, #page2, #page3{
    display:none;
}
#page1:target{
    display:block;
}
#page2:target{
    display:block;
}
#page3:target{
    display:block;
}

【讨论】：

【解决方案3】：

正如另一个答案所述，您可能想看看AngularJS。如果您选择，这里有一个很好的教程可以帮助您入门：http://www.youtube.com/watch?v=i9MHigUZKEM

但是，由于您的问题是 jQuery，因此最好的方法可能是让所有页面分开通过 AJAX 加载的 html 页面并替换您当前的 html。

另一种方法是同时显示页面上的所有内容，并根据用户单击的菜单项隐藏和显示内容。但是，如果页面上同时有很多内容，这可能会使页面变得非常缓慢。

【讨论】：

点击菜单时如何显示来自不同 html 页面的内容？

【解决方案4】：

如果您希望内容嵌入页面但隐藏，请使用 jQuery 的 .hide() 和 .show()

如果要将内容保存在单独的页面中，请使用 jQuery 的 .load()

【讨论】：

【解决方案5】：

使用此代码，确保您的 #page1 和 #page2 div 最初是隐藏的

  jQuery(document).ready(function(){

     jQuery('li').click(function(){

        var new_index = parseInt(jQuery(this).index())+1;

        jQuery("div[id*='page']").hide();
        jQuery('#page'+new_index).show();

     });
  });


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

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

<div id="page1" style="display:none";> <!-- for menu1 -->
 <div>the content 1</div>
</div>

<div id="page2" style="display:none";> <!-- for menu2 -->
 <div>the content 2</div>
</div>

【讨论】：

【解决方案6】：

试试这个链接，它会帮助你。您的右侧网站上有导航栏，您可以从该导航栏浏览您的网站。

Single page website

【讨论】：