HTML, CSS, and jQuery: Build a beautiful paginated navigation

HTML, CSS and jQuery: Build a beautiful paginated navigation

In web design and development, paginated navigation is a very common and practical element. It helps users browse and navigate large amounts of content, while also increasing the usability and user experience of the website. In this article, we will use HTML, CSS, and jQuery to build a beautiful paginated navigation, with specific code examples.

First, we need to create an HTML structure to accommodate the paginated navigation. The following is an example of a basic pagination navigation HTML structure:

<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>

In this example, we use a pagination class to represent the container of pagination navigation, and use ul and li elements to create paginated items. Among them, the previous and next classes represent the links to the previous page and the next page respectively, and the active class is used to represent the current page.

Next, we can use CSS to add styles to the paginated navigation. The following is a basic CSS styling example:

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

In this example, we have used some basic CSS properties such as text-align, padding, text-decoration, etc., to add styles to the paging navigation. We can customize the style as needed to make it more beautiful and consistent with the style of the website.

Finally, we can use jQuery to implement the paging navigation function. The following is a basic jQuery script example:

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

In this example, we use jQuery’s click method to add click events to each item of the paginated navigation. When the user clicks on an item, we will remove the active class of other items and add this class to the current item to achieve the effect of switching the current page.

In addition, we also added additional click events for the links to the previous page and next page so that users can switch to adjacent pages.

To sum up, through HTML, CSS and jQuery, we can easily build a beautiful and practical paging navigation. You can customize the style and functions according to your own needs to adapt to different website design and development needs. Through this example, I hope it can help you better understand and apply these technologies. If you have any questions or concerns, feel free to ask the community for help. I wish you success in your web design and development journey!

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful paginated navigation. For more information, please follow other related articles on the PHP Chinese website!