How to change the active in pagination?

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 tag it ony colors it red when clicked but when you release the mouse it turns blue again.