Как изменить оформление кнопки в зависимости от страницы, на которую ведет кнопка?

Question

[Виктория]

Я извиняюсь за глупый вопрос, буду рада и ссылке с информацией, но никак не могу правильно сформулировать запрос и найти даже в поиске.
Есть блок пагинации в виде кнопок с номерами страниц (так предусмотрено автором задания, обсуждению не подлежит). И надо, чтобы при нахождении, например, на 5-й странице пагинации соответствующая кнопка, ведущая на эту страницу (с номером 5), меняла, к примеру, цвет. Типовая задача, но у меня какой-то затык.
Псевдоклассы типа :active или :focus не помогают - меняется цвет только в процессе клика.

Comments

[Андрей Федоров]

А пагинация как реализована? Статический html, судя по вопросу?

[Ankhena]

Вариантов несколько:
1. Бэк отдает эту ссылку либо сразу без href или сразу с другим классом
2. На JS сравниваете href и url (с доменом или без, смотря как у вас сделаны ссылки), если совпадает, то задаете класс.

Псевдоклассы типа :active или :focus не помогают - меняется цвет только в процессе клика.

Имеет смысл почитать, что делают эти псевдоклассы.

[Aetae]

Как угодно. Есть бесконечное количество способов сделать пагинацию и, соответственно, её окрасить.
Код в студию.

[Виктория]

<?php
// Создаём блок пагинации
$i = 1; // Создаём переменную и присваиваем ей номер первой страницы
 // Пишем цикл while
while ($i <= $total_pages) {
	// Выводим переменную $i
    echo '<a href="?page='.$i.'"><button class=pagination_button>
	'.$i.'
	</button></a>'; 
    $i++; // Увеличиваем переменную $i на один
}
?>

[Виктория]

С помощью JS получается, что с текущим сравнивается последний урл, выданный циклом, а как сравнить тот, который относится именно к той кнопке, по которой перешли на страницу?

[Виктория]

//Получаем текущий урл
var pageUrl = document.location.href;
console.log(pageUrl);
//Получаем урл кнопки
var url = ('http://localhost/news.php?page=' + pagNumber);
console.log(url);
//сравниваем текущий урл и урл кнопки и добавляем класс кнопки при их равенстве
if(pageUrl == url){ button.classList.add("pagination_button_url");}

[Ankhena]

Виктория, ну я бы hash получала.

И я не верю, что вы ссылки пишете абсолютные с указанием localhost.

Answer 1

[Nam Zanilla]

Вам нужно задать класс, к примеру active, на кнопку которая активная, а определить эту кнопку по GET параметру

Answer 2

[Aetae]

Судя по коду из коммента:

<script>
  document.write(
  `<style>
    a[href="${location.search}"] {
      outline: 1px solid #f00;
    }
  </style>`
  );
</script>

Но лучше это делать в php, условно:

<?php
// Создаём блок пагинации
$i = 1; // Создаём переменную и присваиваем ей номер первой страницы
$current = $_GET['page'];
 // Пишем цикл while
while ($i <= $total_pages) {
  // Выводим переменную $i
    echo '<a href="?page=' . $i . '"' . ($i == $current ? ' class="active"': '') . '><button class=pagination_button>
  '.$i.'
  </button></a>'; 
    $i++; // Увеличиваем переменную $i на один
}
?>