How to change the active in pagination?

Question

I have a pagination and I want the active class to be in color red. I have this code:

script.js:

$(".pagination").append("<li class='page-item' id='previous-page'><a class='page-link' href='javascript:void(0)' aria-label=Previous><span aria-hidden=true>&raquo;</span></a></li>");
    $(".pagination").append("<li class='current-page active'><a class='page-link' href='javascript:void(0)'>" + 1 + "</a></li>");
    for (var i = 2; i <= totalPages; i++) {
      $(".pagination").append("<li class='current-page'><a class='page-link' href='javascript:void(0)'>" + i + "</a></li>"); // Insert page number into pagination tabs
    }
    $(".pagination").append("<li class='page-item' id='next-page'><a class='page-link' href='javascript:void(0)' aria-label=Next><span aria-hidden=true>&raquo;</span></a></li>");
    
    $(".pagination li.current-page").on("click", function() {
      //checks if the user is at the current page
      if($(this).hasClass("active")){
        return false;
      }else{
        //removes active class and adds it from what the user is clicking
        var currentPage = $(this).index();
        $(".pagination li").removeClass("active");
        $(this).addClass("active");
        $("#page .content").hide();
}

style.css:

.pagination a:active{
  background-color: red;
  color:red;
}

I have this code but when I clicked on a <a> tag it ony colors it red when clicked but when you release the mouse it turns blue again.

Unmitigated · Answer 1 · 2023-04-28T03:04:19.603

0

Don't use :active, but select the element by class with .active.

.pagination li.active > a {
  background-color: red;
  color: red;
}

edited Apr 28 '23 at 03:04

answered Apr 28 '23 at 01:00

Unmitigated

76,500
11
62
80

I have tried it but it is still in color blue – Dhenhice Apr 28 '23 at 01:18
@Dhenhice I cannot reproduce it. It works fine given the code in the question (although the HTML is assumed): https://jsfiddle.net/f4zj5vnu/ – Unmitigated Apr 28 '23 at 01:20
@Dhenhice You could try `.pagination li.active > a` though. – Unmitigated Apr 28 '23 at 01:51
This one worked, Thank you! – Dhenhice Apr 28 '23 at 02:03

score 0 · Answer 2 · answered Apr 28 '23 at 05:27

0

Try with following css. Working Example https://codepen.io/sethuramancbe/pen/NWOgBNE

.pagination .active a{
background-color: red;
color: red;
}

answered Apr 28 '23 at 05:27

sethuraman

187
7

score 0 · Answer 3 · answered Jul 30 '23 at 08:16

Try it out. Maybe This gonna help.

const listEl = document.querySelector(".page-index");
const prevBnt = document.querySelector(".prev");
const nextBnt = document.querySelector(".next");

let currentActive = 1;

nextBnt.addEventListener("click", e => {
  currentActive++;

  if (currentActive > Array.from(listEl.children).length) {
    currentActive = Array.from(listEl.children).length;
  }
  updateActive();
});

prevBnt.addEventListener("click", e => {
  currentActive--;

  if (currentActive < 1) {
    currentActive = 1;
  }
  updateActive();
});

function updateActive() {
  Array.from(listEl.children)
    .forEach((item, idx) => {
      if (currentActive > idx) {
        removeActive();
        item.classList.add("active");
      }

    });
}

function removeActive() {
  Array.from(listEl.children)
    .forEach(item => {
      item.classList.remove("active");
    });
}

.wraper {
  max-width: 300px;
  margin: 0 auto;
  padding: 100px 20px;
}

ul {}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style-type: none;
  text-align: center;
  margin: 0px;
}

nav ul li {
  background-color: #ddd;
  border: 1px solid #999;
  padding: 3px 5px;
  cursor: pointer;
}

nav ul li.active {
  background-color: red;
}

nav button {
  cursor: pointer;
}

<!doctype html>
<html>

<head></head>

<body>
  <div class="wraper">
    <nav>
      <button type="button" class="prev">&larr;</button>
      <ul class="page-index">
        <li class="active">0</li>
        <li>1</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <button type="button" class="next">&rarr;</button>
    </nav>
  </div>
</body>

</html>

Here you will find full working pagination example https://stackoverflow.com/questions/72298189/implement-pagination-in-javascript-with-limit-and-offset/76798169#76798169 — Shiplu, Jul 30 '23 at 14:43

How to change the active in pagination?

3 Answers3