javascript中div元素的分页

我正在尝试使用javascript对div元素进行分页。但是我在点击使用bootstrap的分页按钮时会遇到一些麻烦，使div元素隐藏/显示。以下是我的代码。对于div元素HTML代码：javascript中div元素的分页

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

有什么错我的代码？

来源

2017-07-18 Karthik Samyak

像@ Dave94回答，空白'href'使得浏览器导航到相同的URl（刷新页面），而是在页面内部导航时使用散列。 – yuriy636

Tnk yuh :)我正在检查一个小时的javascript，认为它可能存在错误！ –

请检查该JSFiddle

我已经修改了这一行：

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

这样：

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

来源

2017-07-18 21:45:30 Dave94

javascript中div元素的分页

回答

相关问题