Извините, если это звучит как очень глупый вопрос, но мне нужно, чтобы ссылка меняла цвет, когда вы находитесь на странице, на которую она ссылается.
Например, когда вы находитесь на странице "Вопросы" Qaru, ссылка вверху меняет цвет. Как ты это делаешь?
Это серверная вещь - при рендеринге страницы добавьте к ссылке такой класс, как "текущая страница". Затем вы можете стилизовать его отдельно от других ссылок.
Например, StackOverflow отображает ссылки с class="youarehere", когда указывает на страницу, на которой вы уже находитесь.
Это действительно зависит от того, как построена ваша страница. Как правило, я хотел бы сделать это с помощью CSS, и присваивать ссылку идентификатору, называемому "активным"...
<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-адресом в ссылке; однако подумайте о том, что в stackoverflow имеется много разных URL-адресов, которые в итоге выводятся на вкладку "Вопросы".
Более сложная версия может либо поместить что-то в сеанс при смене страниц (не слишком надежных); сохранить список страниц/шаблонов URL, которые относятся к каждому элементу меню; или внутри кода самой страницы, установите переменную, чтобы определить, какой элемент выделить.
Затем, как предлагает Джон Милликин, поместите класс в ссылку или на один из его родительских элементов, таких как "текущая страница", которая будет управлять цветом.