Блог

Я пытаюсь применить css к ссылке a href, в основном мне нужно применить тот же стиль, что и при наведении курсора мыши при нажатии на ссылку a href, чтобы указать пользователям, на какой странице они находятся. есть идеи?

:active означает «При нажатии (или иной активации)». Это не означает «Ссылку на текущую страницу». Самое близкое, что есть в CSS для этого, — это :target (который предназначен для определенной точки в документе, а не для документа в целом).

Вам нужно изменить разметку, чтобы вы могли написать для нее селектор. Добавление класса или идентификатора с использованием какой-либо серверной технологии является обычным подходом.

:active Псевдокласс означает, что элемент активируется пользователем. Это срабатывает при нажатии на ссылку, но не сообщает вам, на какой странице пользователь находится в данный момент.

Утомительное решение, выполняемое вручную

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

 <ul id="navigation">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/about.html" class="current-page">About Us</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>
  

Затем на странице контактов вы должны удалить current-page класс из ссылки «О нас» и добавить его в ссылку «Контакт». Проблема с этим решением заключается в том, что оно требует большого количества ручных правок в вашем коде, что может быть болезненным, если вы управляете большим сайтом.

Автоматизированное решение на стороне клиента

Лучшим решением может быть использование Javascript для синтаксического анализа текущей страницы по URL-адресу и автоматического добавления нужного класса к соответствующей ссылке. Код jQuery мог бы выглядеть примерно так (предполагая тот же html, что и выше):

 <script type="text/javascript">
$(document).ready(function() {
    var urlParts = window.location.pathname.split("/"),
        // get the last section of the url
        currentPage = urlParts[urlParts.length - 1];

    $("#navigation a[href*="   currentPage   "]").addClass("current-page");
});
</script>
  

Для этого вам нужно будет добавить класс (например: active, selected и т.д.) К привязке, которую вы хотите оформить. A: active «срабатывает» только при нажатии на ссылку, она не «запоминает» страницу, на которой вы находитесь.

a:active будет работать, только если вы нажмете на эту ссылку и откроете страницу в новом окне / вкладке, означает, что текущую страницу не следует изменять, иначе a:active не будет работать….