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

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

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

11
задан Rahul 16 October 2019 в 07:42
поделиться

7 ответов

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

Например, StackOverflow представляет ссылки с class="youarehere" когда это указывает на страницу, Вы уже включены.

5
ответ дан 3 December 2019 в 07:40
поделиться

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

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

... и в CSS...

a#active { color: yellow; }

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

6
ответ дан 3 December 2019 в 07:40
поделиться

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

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}
2
ответ дан 3 December 2019 в 07:40
поделиться

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

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

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

2
ответ дан 3 December 2019 в 07:40
поделиться

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

В клоне Переполнения стека я создаю с 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
ответ дан 3 December 2019 в 07:40
поделиться

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

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

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

0
ответ дан 3 December 2019 в 07:40
поделиться

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

Более сложная версия может или поместить что-то в сессию при изменении страниц (не слишком устойчивый); сохраните список шаблонов СТРАНИЦ/URL, которые относятся к каждому пункту меню; или в рамках кода самой страницы, устанавливает переменную для определения который объект выделиться.

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

-2
ответ дан 3 December 2019 в 07:40
поделиться
Другие вопросы по тегам:

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