如何在HTML页面中创建分页效果？

引言

分页效果的重要性

如何在HTML页面中创建分页效果

<div id="content">
  <p>这里是内容1</p>
  <p>这里是内容2</p>
  <p>这里是内容3</p>
  <p>这里是内容4</p>
  <p>这里是内容5</p>
  <p>这里是内容6</p>
</div>

<div id="pagination">
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>

#content p {
  display: none;
}

#content p:first-child {
  display: block;
}

var links = document.querySelectorAll('#pagination a');

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(e) {
    e.preventDefault();

    var page = parseInt(this.innerHTML);

    var paragraphs = document.querySelectorAll('#content p');

    for (var j = 0; j < paragraphs.length; j++) {
      paragraphs[j].style.display = 'none';
    }

    var start = (page - 1) * 3;

    for (var k = start; k < start + 3; k++) {
      if (paragraphs[k]) {
        paragraphs[k].style.display = 'block';
      }
    }

    for (var l = 0; l < links.length; l++) {
      links[l].classList.remove('active');
    }

    this.classList.add('active');
  });
}

结论