HTML, CSS et jQuery : créez une belle navigation paginée

<div class="pagination">
  <ul>
    <li class="previous"><a href="#">&laquo; 上一页</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">下一页 &raquo;</a></li>
  </ul>
</div>

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