Wie markiere ich einen Link auf der aktuellen Seite basiert?

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

Frage

Sorry, wenn das klingt wie eine wirklich dumme Frage, aber ich brauche einen Link die Farbe wechseln zu machen, wenn Sie auf der Seite sind es Links zu.

Zum Beispiel, wenn Sie auf die „Fragen“ Seite von Stackoverflow sind, ändert sich der Link oben Farbe. Wie machen Sie das?

War es hilfreich?

Lösung

Es ist eine serverseitige Sache - wenn die Seite dargestellt, eine Klasse wie „Strom-Seite“ auf den Link hinzufügen. Dann können Sie es getrennt von den anderen Links-Stil.

Zum Beispiel macht die Links mit Stackoverflow class="youarehere", wenn es auf die Seite Punkte sind Sie bereits auf.

Andere Tipps

Es hängt wirklich davon ab, wie Ihre Seite aufgebaut ist. Normalerweise würde ich dies mit CSS tun, und weisen Sie dem Link auf eine ID geben als „aktiv“ ... 

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

... und in der CSS ... 

a#active { color: yellow; }

Natürlich ist dies ein ziemlich einfaches Beispiel, aber es zeigt die allgemeine Idee.

Sie können dies tun, ohne tatsächlich die Links selbst für jede Seite ändern.

In dem Stack-Überlauf-Klon ich mit Django baue, ich tue dies: 

<!-- 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>

Füllen Sie dann im bodyclass wie so in Seitenvorlagen: 

<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...

Dann mit dem folgende CSS, die entsprechende Verknüpfung für jede Seite hervorgehoben: 

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; }

Legen Sie eine Klasse auf dem Body-Tag für jede Seite (manuell oder Server-Seite). Dann in Ihrem CSS diese Klasse verwenden, um festzustellen, welche Seite Sie sind auf und aktualisieren Sie den Stil auf den Punkt entsprechend. 

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

Hier ist eine gute längere Erklärung

Wenn Sie aus irgendeinem Grund nicht wollen, dies auf der Serverseite zu handhaben, können Sie dies versuchen: 

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}

Server-Side-Code ist die einfachste, nur um eine Klasse auf dem Link auf der aktuellen Seite einstellen, aber das ist auch möglich, auf der Client-Seite mit JavaScript, um eine zweite Klasse auf alle Elementen in einer bestimmten Klasse Einstellung, die eine hat href, die die aktuelle Seite passt.

Sie könnten entweder document.getElementsByTagName () oder document.links [] und suchen nur für diejenigen, die in einer Klasse Ihre Navigations-Links bezeichnet und stellen Sie dann eine zweite Klasse bezeichnet Strom, wenn er die aktuelle URL entspricht.

Die URLs werden relativ sein, während document.URL nicht. Aber man kann manchmal das gleiche Problem mit relativ vs. hat absolut auf der Server-Seite, wenn Sie Inhalte aus einem tabellengesteuerten Design generieren und die Benutzer können entweder absolute oder relative URLs setzen trotzdem.

Sie müssen Code auf dem Server für diese. Ein vereinfachenden Ansatz ist es, die URL der aktuellen Seite an die URL in dem Link zu vergleichen; jedoch der Ansicht, dass es viele verschiedene URLs in Stackoverflow sind, die alle Ergebnis in der Registerkarte ‚Fragen‘ hervorgehoben werden.

Eine anspruchsvollere Version kann entweder etwas in der Sitzung setzen, wenn Sie Seiten ändern (nicht zu robust); Speichern einer Liste von Seiten / URL-Muster, die zu jedem Menüpunkt relevant sind; oder im Code der Seite selbst, eine Variable, um zu bestimmen, welches Element zu markieren.

Dann wird, wie John Millikin vermuten läßt, setzt eine Klasse auf dem Link oder auf einem ihrer Mutterelemente wie „Strom-Seite“, die die Farbe von ihnen kontrollieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top