Html javascript中div元素的分页

我正在尝试使用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-->

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

分页代码：

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

函数显示页面（id）{
var totalNumberOfPages=5；
对于（var i=1；i请检查此项

我修改了这一行：

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



为此：

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

就像@Dave94 answered一样，一个空白的
href
会让浏览器导航到同一个URl（刷新页面），而在页面内部导航时会使用散列。Tnk yuh:）我检查了一个小时的javascript，认为里面可能有错误！