1

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

它们也在 HTML 中，page divs除非选择了正确的菜单（或者更好的方法是将页面放在 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 实现这一点？

4

6 回答 6

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

于 2013-11-14T05:38:47.750 回答
0

要在不同的容器中显示预加载的内容，您可以使用带有一些 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;
}
于 2013-11-14T05:32:19.040 回答
0

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

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

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

于 2013-11-14T05:40:29.627 回答
0

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

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

于 2013-11-14T05:44:04.543 回答
0

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

  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>
于 2013-11-14T05:49:33.303 回答
0

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

单页网站

于 2013-11-14T05:56:33.527 回答