Question

我对创建<section>作为页面有疑问。

我想创建一个包含大量<section>的HTML，下面是我的概念。

<html>
    <head>
    </head>
    <body>
        <section id="section1"></section>
        <section id="section2"></section>
        <section id="section3"></section>
    </body>
</html>

enter image description here

我希望限制用户只能滚动，直到 section1 结束。
在用户点击下一个按钮之前，请转到 section2 。

有没有javascript插件或css能够做到这一点？

如果这个问题重复，请告诉我。

谢谢。

添加：我发现链接可以描述我的问题。设计者在一个HTML页面内编写所有代码。但我们只允许滚动直到该部分的结尾而不转到其他部分。

http://theme-art.com/quickmetro/

Answer 1

最初你可以使用javascript / jquery隐藏第二和第三部分，点击下一个按钮你可以使用js代码取消隐藏第2部分： -

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

请参考一个简单的jsfiddle我做的更好地理解这一点。请告诉我这是否清除它还是需要更多细节？

Answer 2

你可以尝试这个jQuery。在这里，我首先隐藏所有部分，然后使下一部分可见。

CSS ：section{display:none};

jQUERY ：

$(function(){
 // show first section by default.
 $('#section1').show();
 var currentSection='section1';
 var lastSection = $('[id^=section]:last').attr('id');

    $('#btnNext').click(function(){
        if(currentSection!=lastSection)
        {
        // hide all section for id start with section
            $('[id^=section]').hide();
      var nextSection = $('#'+currentSection).next();
      currentSection = $(nextSection).attr('id');
      $(nextSection).show();
        }
    });
});

<强> DEMO

Answer 3

仅限CSS

您可以将这些部分设置为隐藏样式，并使用:target伪类和#sectionX链接显示它，如果您不需要使用锚链接来实现其他目的。 http://jsfiddle.net/s9aMG/

JQuery的

这是使用JQuery http://jsfiddle.net/Gf62N/

执行此操作的另一种方法

<section id="section1">Section1</section>
<section id="section2">Section2</section>
<section id="section3">Section3</section>
<section id="section4">Section4</section>

$(document).ready(function() {
  $('body > section').next().hide();
  $('body > section').append('<div class="next">next</div>');
    $('.next').click(function () {
      if($(this).parent().next().length != 0) {
        $(this).parent().hide();
        $(this).parent().next().show();
      }
    });
});

创建<section>作为页面</section>

3 个答案:

仅限CSS

JQuery的