Изменить цвет тега привязки по клику с помощью CSS

У меня есть тег привязки «Домой», на котором отображается домашняя страница, а еще один — «Книги» на этой странице отображения книг. Теперь, когда я нажимаю на ссылку «Главная», я хочу, чтобы она изменила свой цвет и сохраняла тот же цвет, пока я не нажму на другую ссылку. Точно так же, когда я нажимаю ссылку «Книги», я хочу, чтобы она изменила этот цвет и сохраняла тот же цвет, пока я не нажму другую ссылку.

Я могу сделать это с помощью JavaScript, но я хочу знать, как я могу добиться этого, используя только CSS?

Пробовал с a:active, но не работает.

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href = "https://fonts.googleapis.com/css2?family=Literata:opsz,[email protected],300&display=swap" rel = "stylesheet">
    <link rel = "stylesheet" href = "styles.css">
    <title>Bookstore</title>
</head>
<body>
    <div class = "container">
            <ul>
                <li><a href = "home.html">Home</a></li>
                <li><a href = "books.html">Books</a></li>
            </ul>
        </div>
      
    
</body>
</html>

html css computer-science

18.01.2023 06:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

HTML code
<a tabindex = "1">Your Button</a>


CSS code
a {   
    color: black;  
    font-size: 30px; 
}

a:active {
    color: rebeccapurple;
}

a[tabindex]:focus {
    color:rebeccapurple;
}

Это не сохраняет цвет как rebeccapurple. Я хочу, чтобы он оставался как rebeccapurple, пока я не нажму на другую ссылку.

— 18.01.2023 07:58

18.01.2023 07:23

Ответ принят как подходящий

Вы можете сделать это так, используйте focus, но если использовать только это, стиль будет потерян, как только другой элемент получит фокус, поэтому добавьте класс к вашему a, как в моем примере link, а затем используйте его в CSS, как показано ниже:

a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

a:focus {
  color: red;
}

:link {
  color: red;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href = "https://fonts.googleapis.com/css2?family=Literata:opsz,[email protected],300&display=swap" rel = "stylesheet">
    <link rel = "stylesheet" href = "styles.css">
    <title>Bookstore</title>
</head>
<body>
    <div class = "container">
            <ul>
                <li><a href = "#" class = "link">Home</a></li>
                <li><a href = "#" class = "link">Books</a></li>
            </ul>
        </div>
      
    
</body>
</html>

18.01.2023 08:40

Добавление tabindex к каждому элементу привязки позволяет применить псевдокласс :focus:

<style>
ul li a {
    color: #000;
}
ul li a:focus {
  color: red;
}
ul li a:selected {
  color: red;
}
</style>

<ul>
  <li><a tabindex = "1" href = "#" class = "selected"> item1 </a></li>
  <li><a tabindex = "1" href = "#" class = "selected"> item2 </a></li>
  <li><a tabindex = "1" href = "#" class = "selected"> item3 </a></li>
</ul

18.01.2023 10:37

Другие вопросы по теме

Используйте python jinja для автоматического увеличения идентификатора изображения из SQL-Alchemy-DB, обслуживаемого в html через флягу

Анимация перетаскивания элементов списка реагирования

JavaFX - Таблица: при выборе строки измените цвет границы таблицы

Изменить цвет тела в стиле CSS как Div

CSS-переходы в Safari

Выпадающее меню - столбцы внутри

Выровняйте div, чтобы начать с центра строки

CSS: дефисы: авто не работает для некоторых слов

Изменить фон родительской метки, когда установлен флажок

Можно ли изменить фон всей строки в таблице html, когда в строке выбрана только одна ячейка с использованием css и стилей?

Изменить цвет тега привязки по клику с помощью CSS

Ответы 3

Другие вопросы по теме

Похожие вопросы