Как выделить ссылку на основе текущей страницы?

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

Вопрос

Извините, если это звучит как очень глупый вопрос, но мне нужно, чтобы ссылка меняла цвет, когда вы находитесь на странице, на которую она ссылается.

Например, когда вы находитесь в разделе " Вопросы " страница stackoverflow, ссылка вверху меняет цвет. Как ты это делаешь?

Это было полезно?

Решение

Это вещь на стороне сервера - при отображении страницы добавьте класс, подобный " current-page " на ссылку. Затем вы можете оформить его отдельно от других ссылок.

Например, StackOverflow отображает ссылки с помощью class = " youarehere " , когда он указывает на страницу, на которой вы уже находитесь.

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

Это действительно зависит от того, как устроена ваша страница. Как правило, я делаю это с помощью CSS и назначаю присвоить ссылке идентификатор с именем " active " ... 

<a id="active" href="thisPage.html">this page</a>

... и в CSS ... 

a#active { color: yellow; }

Очевидно, это довольно упрощенный пример, но он иллюстрирует общую идею.

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

В клоне Stack Overflow, который я создаю вместе с Django, я делаю это: 

<!-- base.html -->
...
<body class="{% block bodyclass %}{% endblock %}">
...
<div id="nav">
  <ul>
    <li id="nav-questions"><a href="{% url questions %}">Questions</a></li>
    <li id="nav-tags"><a href="{% url tags %}">Tags</a></li>
    <li id="nav-users"><a href="{% url users %}">Users</a></li>
    <li id="nav-badges"><a href="{% url badges %}">Badges</a></li>
    <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li>
  </ul>
</div>

Затем заполните bodyclass , как в шаблонах страниц: 

<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...

Затем с помощью следующего CSS соответствующая ссылка будет выделена для каждой страницы: 

body.questions #nav-questions a,
body.tags #nav-tags a,
body.users #nav-users a,
body.badges #nav-badges a,
body.ask-question #nav-ask-question a { background-color: #f90; }

Установите класс в теге body для каждой страницы (вручную или на стороне сервера). Затем в своем CSS используйте этот класс, чтобы определить, на какой странице вы находитесь, и соответствующим образом обновить стиль элемента. 

body.questions #questionsTab
{
    color: #f00;
}

Вот хорошее более подробное объяснение

Если по какой-то причине вы не хотите обрабатывать это на стороне сервера, вы можете попробовать это: 

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}

Серверный код является самым простым, просто установив класс на ссылке на текущей странице, но это также возможно на стороне клиента с JavaScript, установив второй класс для всех элементов в определенном классе, которые имеют href, соответствующий текущей странице.

Вы можете использовать document.getElementsByTagName () или document.links [] и искать только те элементы в классе, которые обозначают ваши навигационные ссылки, а затем установить второй класс, обозначающий текущий, если он соответствует текущему URL.

URL-адреса будут относительными, а document.URL - нет. Но иногда у вас может возникнуть та же проблема с относительным и абсолютным на стороне сервера, если вы генерируете контент из табличного дизайна, и пользователи в любом случае могут указывать либо абсолютные, либо относительные URL.

Для этого вам нужен код на сервере. Упрощенный подход заключается в сравнении URL-адреса текущей страницы с URL-адресом в ссылке; однако учтите, что в стековом потоке есть много разных URL, и все они приводят к выделению вкладки «Вопросы».

Более сложная версия может либо помещать что-либо в сеанс при смене страниц (не слишком надежная); хранить список шаблонов страниц / URL, относящихся к каждому пункту меню; или в коде самой страницы установите переменную, чтобы определить, какой элемент нужно выделить.

Затем, как предлагает Джон Милликин, поместите класс в ссылку или в один из его родительских элементов, таких как «текущая страница». который будет контролировать его цвет.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top