Question 80235 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change the active in pagination? – Jquery

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.

Tags:

2

Answers


  1. 0

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

    .pagination li.active > a {
  background-color: red;
  color: red;
}
    Login or Signup to reply.
  2. 0

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

    .pagination .active a{
background-color: red;
color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search