javascript中div元素的分页答案

【问题标题】：pagination for div elements in javascriptjavascript中div元素的分页
【发布时间】：2021-08-30 13:08:37
【问题描述】：

我正在尝试使用 javascript 为 div html 元素进行分页。但是我在单击我使用引导程序制作的分页按钮时使 div 元素隐藏/显示时遇到了一些麻烦。下面是我的代码。 div 元素的 HTML 代码：

<div  id="page2" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 1-->
<div  id="page3" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 2-->
<div  id="page4" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 3-->
<div id="page5" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 4-->

分页码：

<div class="container">
   <div class="text-center">
      <ul class="pagination pagination-lg">

         <li><a href="" onclick="showPages('1')">1</a></li>
         <li><a href="" onclick="showPages('2')">2</a></li>
         <li><a href="" onclick="showPages('3')">3</a></li>
         <li><a href="" onclick="showPages('4')">4</a></li>
         <li><a href="" onclick="showPages('5')">5</a></li>

      </ul>
   </div>
</div>

Javascript：

function showPages(id){


    var totalNumberOfPages = 5;
    for(var i=1; i<=totalNumberOfPages; i++){

        if (document.getElementById('page'+i)) {

            document.getElementById('page'+i).style.display='none';
        }

    }
        if (document.getElementById('page'+id)) {

            document.getElementById('page'+id).style.display='block';
        }
};

我的代码有什么问题？？

【问题讨论】：

就像@Dave94 的回答一样，空白href 使浏览器导航到相同的 URl（刷新页面），而不是在页面本身内部导航时使用哈希。
Tnk yuh:) 我检查了 javascript 一个小时，认为其中可能存在错误！

标签： html pagination

【解决方案1】：

请查看JSFiddle

我已经修改了这一行：

<a href="" onclick="showPages('2')">2</a>

到这里：

<a href="#" onclick="showPages('2')">2</a>

【讨论】：