HTML, CSS, jQuery: 페이지가 매겨진 아름다운 탐색 기능 구축

 
 
« 上一页
 
1
 
2
 
3
 
4
 
5
 
下一页 »
 
 

.pagination { text-align: center; } .pagination ul { display: inline-block; list-style: none; padding: 0; margin: 0; } .pagination li { display: inline-block; } .pagination li a { display: inline-block; padding: 8px 12px; text-decoration: none; color: #333; background-color: #f2f2f2; border: 1px solid #ddd; border-radius: 4px; } .pagination li.active a { color: #fff; background-color: #337ab7; border-color: #337ab7; } .pagination li.previous a, .pagination li.next a { color: #333; background-color: #f2f2f2; border-color: #ddd; } .pagination li.previous a:hover, .pagination li.next a:hover { color: #333; background-color: #ddd; border-color: #ccc; }

$(document).ready(function() { $('.pagination li').click(function() { $('.pagination li').removeClass('active'); $(this).addClass('active'); }); $('.pagination li.previous').click(function() { var current = $('.pagination li.active'); var previous = current.prev('li'); if (previous.hasClass('previous')) { previous = previous.prev('li'); } current.removeClass('active'); previous.addClass('active'); }); $('.pagination li.next').click(function() { var current = $('.pagination li.active'); var next = current.next('li'); if (next.hasClass('next')) { next = next.next('li'); } current.removeClass('active'); next.addClass('active'); }); });