Как выделить ссылку на текущей странице?
Извините, если это звучит как действительно глупый вопрос, но мне нужно изменить цвет ссылки, когда вы находитесь на странице, на которую она ведет.
Например, когда вы находитесь на странице «Вопросы» StackOverflow, ссылка вверху меняет цвет. Как ты это делаешь?
Ответы 7
Это серверная вещь - при рендеринге страницы добавьте к ссылке такой класс, как «current-page». Затем вы можете оформить его отдельно от других ссылок.
Например, StackOverflow отображает ссылки с class = "youarehere", когда указывает на страницу, на которой вы уже находитесь.
Установите класс в теге body для каждой страницы (вручную или на стороне сервера). Затем в своем 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; }
Очевидно, это довольно упрощенный пример, но он иллюстрирует общую идею.
Это действительно то, для чего следует использовать класс, а не идентификатор
Извини, Джон, но здесь я прошу не согласиться. Поскольку в вопросе упоминалась навигационная ссылка, и она будет отображаться на странице только один раз, идентификатор будет более подходящим. Если бы он собирался появляться на странице более одного раза, класс был бы более подходящим.
А если бы у вас тоже был неактивный класс? Я бы предпочел использовать класс и сохранить все в одном типе, но любой из них работает нормально.
Зачем вам неактивный класс? Неактивным состоянием будет элемент привязки со стилем по умолчанию.
Я бы использовал здесь класс. Что, если вы решите повторить навигацию внизу страницы или что-то в этом роде?
Я никогда не встречал в приложении случая, когда основная навигация повторялась внизу. Я бы подумал об этом по-другому, если бы приложение требовало повторяемой навигации. В этом вопросе в качестве примера упоминается навигация stackoverflow. Вот что я прокомментировал.
Я изменил часть HTML и добавил код CSS в таблицу стилей, но в итоге все мои элементы будут выделены, независимо от того, щелкаете вы их или нет.
Вы можете сделать это, не изменяя сами ссылки для каждой страницы.
В клоне 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; }
Просто любопытно, зачем вы строите клона?
Код на стороне сервера является самым простым, просто установив класс для ссылки на текущей странице, но это также возможно на стороне клиента с помощью 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';
}
}
этот onload () сбивает с толку. Наверное window.onload = function () {} лучше
Вопрос правильно сформулирован. Так что это не глупо. :)