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

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

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

10
css html navigation

7 ответов

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

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

4

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

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

...и в CSS...

a#active { color: yellow; }

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

5

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

в Клоне переполнения стека, который я создаю с 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; }
3

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

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

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

2

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

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

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

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

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

0

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

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

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

-2