Как я выделяю ссылку на основе текущей страницы?
Если API не предназначен для публичного доступа, вы, скорее всего, пропускаете токен csrf в своих последующих заголовках. Вы должны найти токен CSRF и добавить его в /api/follows POST. Если быстро взглянуть на код, это может быть сложно, так как все идет внутри javascript.
7 ответов
Это - вещь серверной стороны - при рендеринге страницы добавьте класс как "текущая страница" к ссылке. Затем можно разработать его отдельно из других ссылок.
Например, StackOverflow представляет ссылки с class="youarehere" когда это указывает на страницу, Вы уже включены.
Это действительно зависит от того, как Ваша страница создается. Как правило, я сделал бы это использование CSS и присвоился бы, дают ссылке идентификатор, названный "активным"...
<a id="active" href="thisPage.html">this page</a>
... и в CSS...
a#active { color: yellow; }
Очевидно, это - довольно упрощенный пример, но он иллюстрирует общее представление.
Если по некоторым причинам Вы не хотите обрабатывать это на серверной стороне, можно попробовать это:
// assuming this JS function is called when page loads
onload()
{
if (location.href.indexOf('/questions') > 0)
{
document.getElementById('questionsLink').className = 'questionsStyleOn';
}
}
Установите класс на теге основного текста для каждой страницы (вручную или серверная сторона). Затем в Вашем использовании CSS тот класс для идентификации, какая страница Вы идете и обновляете стиль на объекте соответственно.
body.questions #questionsTab
{
color: #f00;
}
Можно сделать это, не имея необходимость на самом деле изменять сами ссылки для каждой страницы.
В клоне Переполнения стека я создаю с 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 [] и искать только document.links в классе, обозначающем Ваши навигационные ссылки и затем установить второй класс, обозначающий текущий, если он соответствует текущему URL.
URL будут относительны, в то время как документ. URL не будет. Но у Вас может иногда быть эта та же проблема с родственником по сравнению с абсолютом на серверной стороне, если Вы генерируете содержание от табличного дизайна, и пользователи могут поместить или абсолютные или относительные URL так или иначе.
Вам нужен код сервера для этого. Упрощенный подход должен сравнить URL текущей страницы к URL в ссылке; однако полагайте, что существует много различных URL в stackoverflow который весь результат на выделяемой вкладке 'Questions'.
Более сложная версия может или поместить что-то в сессию при изменении страниц (не слишком устойчивый); сохраните список шаблонов СТРАНИЦ/URL, которые относятся к каждому пункту меню; или в рамках кода самой страницы, устанавливает переменную для определения который объект выделиться.
Затем как предлагает John Millikin, помещает класс в ссылку или в один из ее родительских элементов, таких как "текущая страница", которая будет управлять цветом его.