simplePagination.js
ページ分割ができる「simplePagination.js」。
jquery本体と下記ファイルを読み込みます。
・「jquery.simplePagination.js」
・「simplePagination.css」
HTML
<div class="selection" id="page-1"> 1ページ </div> <div class="selection" id="page-2"> 2ページ </div> <div class="selection" id="page-3"> 3ページ </div> <div class="selection" id="page-4"> 4ページ </div> <div class="selection" id="page-5"> 5ページ </div>
ページネーションを表示させたい箇所に下記を記述。
<div class="pagination-holder cf"> <div id="light-pagination" class="pagination"></div> </div>
スクリプト
<script> $(function(){ $(".pagination").pagination({ items: 5, displayedPages: 1, cssStyle: 'light-theme', onPageClick: function(currentPageNumber){ showPage(currentPageNumber); } }) }); function showPage(currentPageNumber){ var page="#page-" + currentPageNumber; $('.selection').hide(); $(page).show(); } </script>
CSS
.selection { display:none; } #page-1 { display:block; }