What is the process for altering the active status in pagination?

Question

What is the process for altering the active status in pagination?

How can I make the active class in my pagination appear in red? Here's the code snippet I have:

In my script.js file:

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

And in my style.css file:

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

The issue I'm facing is that the <a> tag only turns red when clicked, but reverts back to blue once the mouse is released. How can I make sure it stays red while active?

javascript jquery css pagination anchor

Answer 1

Answer №1

Avoid utilizing the pseudo-class :active and opt for selecting the element by its class using .active.

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

Answer 2

Avoid utilizing the pseudo-class :active and opt for selecting the element by its class using .active.

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

Answer 3

Answer №2

To see the result, you can test it using the CSS code snippet provided below: See It in Action here

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

Answer 4

To see the result, you can test it using the CSS code snippet provided below: See It in Action here

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

Answer 5

Answer №3

Give it a try and see if this can be of assistance.

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>

Answer 6

Give it a try and see if this can be of assistance.

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>

What is the process for altering the active status in pagination?

Answer №1

Answer №2

Answer №3

Similar questions

Error thrown: SyntaxError - Forbidden break statement in AJAX code execution

HTML does not support the display of characters by unicode

Node.js - Passport authentication consistently results in redirection to failure route

What is the best way to assign two styles with the same value in a single line of code?

Undefined is returned after resolving - React - JavaScript API

Executing a jQuery AJAX request within a script that has been imported from a different domain

Encountering an Unexpected Token Error While Parsing JSON with jQuery

Issue retrieving Select2 tag values from view to controller in ASP.NET MVC 5

Problems with Searching in Bootstrap Tables

Insert some text into the div element. Create a new line

I wish to adjust the font size as well as resize the table elements simultaneously

How can I style an image in CSS to have a set height, maximum width, and keep its aspect ratio fixed?

Using jQuery's toggle function with a double click event to change the display to none

What is the best way to trigger a re-render of a Vue component after a change in Vuex

After installation, the Tailwind classes seem to be malfunctioning

search through an object to find specific data

What is the best way to crop an image to focus solely on the center portion?

When using angular's ngHide directive on a button, it will still occupy space in the

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Update a JQuery function for an input field following an innerHTML command