Webpage Pagination script code

                Webpage Pagination script code

How to Webpage Pagination ?

Webpage pagination allows users to navigate through a large amount of content on a website in a more manageable way, by breaking it up into smaller, more digestible sections. Here is a sample script code for webpage pagination:

HTML:

<div class="pagination">

  <a href="#">&laquo;</a>

  <a href="#">1</a>

  <a href="#">2</a>

  <a href="#">3</a>

  <a href="#">4</a>

  <a href="#">5</a>

  <a href="#">6</a>

  <a href="#">&raquo;</a>

</div>

CSS:

..pagination {

  display: flex;

  list-style: none;

  justify-content: center;

  margin: 20px 0;

}

.pagination a {

  color: #666;

  padding: 5px 10px;

  border-radius: 3px;

  text-decoration: none;

  transition: background-color .3s;

}

.pagination a:hover {

  background-color: #ddd;

}

.pagination a.active {

  background-color: #007bff;

  color: #fff;

}

Java Script:

var pagination = document.querySelector('.pagination');

var pages = pagination.querySelectorAll('a');

 

for (var i = 0; i < pages.length; i++) {

  pages[i].addEventListener('click', function(e) {

    e.preventDefault();

 

    var current = pagination.querySelector('.active');

    current.classList.remove('active');

 

    this.classList.add('active');

  });

}

This code creates a pagination bar with links to multiple pages, and styles it using CSS. The JavaScript code adds an event listener to each link, so when a link is clicked, it removes the "active" class from the current link and adds it to the clicked link, highlighting the current page.