Question

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

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

Answer 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;
}

Answer 3

如另一个答案所述，您可能需要查看AngularJS。如果您选择以下内容，这是一个很好的教程，可以帮助您入门：http://www.youtube.com/watch?v=i9MHigUZKEM

然而，由于你的问题陈述了jQuery，最好的方法可能是让所有页面分开通过AJAX加载的html页面并替换你当前的html。

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

Answer 4

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

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

Answer 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>

Answer 6

试试这个链接，它会对你有所帮助。您在右手网站上有导航栏，您可以在其中浏览网站。

Single page website

使用jQuery设计单页网站

6 个答案: