簡單的jquery或javascript分頁

Question

我想包括一個「分頁」與jquery或JavaScript到我的網站。

因此，我創建了以下簡單的HTML代碼：

<div class="post-list"> 

    <div class="post"> 
    <h3> head1 </h3> 
    <p> Test1 </p> 
    </div> 

    <div class="post"> 
    <h3> head2 </h3> 
    <p> Test2 </p> 
    </div> 

    <div class="post"> 
    <h3> head3 </h3> 
    <p> Test3 </p> 
    </div> 

    <div class="post"> 
    <h3> head4 </h3> 
    <p> Test4 </p> 
    </div> 

    <div class="post"> 
    <h3> head5 </h3> 
    <p> Test5 </p> 
    </div> 

    <div class="post"> 
    <h3> head6 </h3> 
    <p> Test6 </p> 
    </div> 

</div> 


    <div class="pagination"> 

    </div> 

我是新手在web開發中，我不知道如何寫一個簡單的 JavaScript或jQuery代碼做一個拼版作業。 在搜索互聯網後，我還沒有找到任何簡單的解決方案。

因此，我真的很感激它，如果你能告訴我一個jquery或javascirpt代碼，我可以適用於這個html代碼。

感謝:-)

Answer 1

任何幫助使用jQuery：

<a href="#" id="prev">Prev page</a> 
<a href="#" id="next">Next page</a> 
<div class="pagination"> 
    <div class="post" id="page1"> <!-- I gave every "page" an ID. --> 
     <h3> head1 </h3> 
     <p> Test1 </p> 
    </div> 

    <div class="post" id="page2"> 
     <h3> head2 </h3> 
     <p> Test2 </p> 
    </div> 

    <div class="post" id="page3"> 
     <h3> head3 </h3> 
     <p> Test3 </p> 
    </div> 

    <div class="post" id="page4"> 
     <h3> head4 </h3> 
     <p> Test4 </p> 
    </div> 

    <div class="post" id="page5"> 
     <h3> head5 </h3> 
     <p> Test5 </p> 
    </div> 

    <div class="post" id="page6"> 
     <h3> head6 </h3> 
     <p> Test6 </p> 
    </div> 
</div> 

所有你需要在這種情況下做的是動態隱藏除了一個每一頁，你想看到：

function showPage(page) { 
    $('.pagination .post:not(#page'+page+')').hide(); 
    $('.pagination .post#page'+page).show(); 
} 

如果你想要下一個和上一個按鈕，你可以很容易地這樣做：

function prevPage() { 
    if (page == 1) { 
     page = $('.pagination .post').length; 
    } else { 
     page--; 
    } 
    showPage(page); 
} 

function nextPage() { 
    if (page == $('.pagination .post').length) { 
     page = 1; 
    } else { 
     page++; 
    } 
    showPage(page); 
} 

請注意，如果您想擁有下一個和上一個按鈕，則需要存儲頁面的編號（在示例中我使用了page）。

Example Fiddle