Извините, если это звучит как действительно глупый вопрос, но мне нужно сделать цвет изменения ссылки, когда вы находитесь на странице, на которой она ссылается.Как выделить ссылку на текущей странице?
Например, когда вы находитесь на странице «Вопросы» stackoverflow, ссылка наверху меняет цвет. Как ты делаешь это?
Это ссылка на сервер. При рендеринге страницы добавьте в ссылку класс, например «текущая страница». Затем вы можете стилизовать его отдельно от других ссылок.
Например, StackOverflow отображает ссылки с class="youarehere", когда указывает на страницу, на которой вы уже находитесь.
Установите класс на тег тела для каждой страницы (вручную или на стороне сервера). Затем в вашем CSS используйте этот класс, чтобы определить, на какой странице вы находитесь, и соответствующим образом обновить стиль.
body.questions #questionsTab
{
color: #f00;
}
Вам нужно код на сервере для этого. Упрощенный подход заключается в сравнении URL-адреса текущей страницы с URL-адресом в ссылке; однако подумайте о том, что в stackoverflow имеется много разных URL-адресов, которые в итоге выводятся на вкладку «Вопросы».
Более сложная версия может либо помещать что-то в сеанс при смене страниц (не слишком надежных); сохранить список страниц/шаблонов URL, которые относятся к каждому элементу меню; или внутри кода самой страницы, установите переменную, чтобы определить, какой элемент выделить.
Затем, как предлагает Джон Милликин, поместите класс по ссылке или на один из его родительских элементов, таких как «текущая страница», которые будут контролировать его цвет.
Это действительно зависит от того, как построена ваша страница. Как правило, я хотел бы сделать это с помощью CSS, и назначить дать ссылку идентификатор, называемый «активный» ...
<a id="active" href="thisPage.html">this page</a>
... и в CSS ...
a#active { color: yellow; }
Очевидно, что это довольно простой пример, но он иллюстрирует общую идею.
Это действительно то, для чего нужно использовать класс, а не ID – 2008-10-08 00:04:21
Извините, Джон, но я прошу, чтобы он отличался здесь. Поскольку это ссылка на навигацию, о которой упоминалось в вопросе, и она будет отображаться только на странице, идентификатор более подходит. Если он будет отображаться более одного раза на странице, класс будет более уместным. – 2008-10-08 00:14:57
И если у вас был неактивный класс? Я бы предпочел использовать класс и сохранить все в одном типе, но либо отлично работает. – 2008-10-08 00:24:14
Вы можете сделать это без фактического изменения самих ссылок для каждой страницы.
В клоне переполнением стека, я в здании с 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; }
S erver side code является самым простым, просто установив класс на ссылку на текущей странице, но это также возможно на стороне клиента с JavaScript, устанавливая второй класс для всех элементов в определенном классе, которые имеют href, который соответствует текущую страницу.
Вы можете использовать либо document.getElementsByTagName(), либо document.links [], и посмотреть только те, что указаны в классе, обозначающие ваши ссылки навигации, а затем установить второй класс, обозначающий текущий, если он соответствует текущему URL-адресу.
URL-адреса будут относительными, а document.URL - нет. Но иногда у вас может быть такая же проблема с относительной абсолютной на стороне сервера, если вы создаете контент из табличного дизайна, и пользователи могут поместить абсолютные или относительные URL-адреса в любом случае.
Если по каким-то причинам вы не хотите, чтобы справиться с этим на стороне сервера, вы можете попробовать это:
// assuming this JS function is called when page loads
onload()
{
if (location.href.indexOf('/questions') > 0)
{
document.getElementById('questionsLink').className = 'questionsStyleOn';
}
}
Вопрос хорошо сформирован. Так что это не глупо. :) – 2008-10-08 00:10:08