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

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

11 голосов
/ 08 октября 2008

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

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

Ответы [ 7 ]

6 голосов
/ 08 октября 2008

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

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

... и в CSS ... 

a#active { color: yellow; }

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

5 голосов
/ 08 октября 2008

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

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

3 голосов
/ 08 октября 2008

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

В клоне 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; }
2 голосов
/ 08 октября 2008

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

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}
2 голосов
/ 08 октября 2008

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

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

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

0 голосов
/ 08 октября 2008

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

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

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

0 голосов
/ 08 октября 2008

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...