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元素的分頁

回答

相關問題