Come evidenziare un collegamento basato sulla pagina corrente?

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

  •  05-07-2019
  •  | 
  •  

Domanda

Scusate se sembra una domanda davvero stupida, ma devo fare in modo che un link cambi colore quando vi trovate sulla pagina a cui si collega.

Ad esempio, quando ti trovi in ??" Domande " pagina di StackOverflow, il collegamento in alto cambia colore. Come si fa?

È stato utile?

Soluzione

È una cosa sul lato server: durante il rendering della pagina, aggiungi una classe come " pagina corrente " al link. Quindi puoi modellarlo separatamente dagli altri link.

Ad esempio, StackOverflow esegue il rendering dei collegamenti con class = " youarehere " quando punta alla pagina in cui sei già.

Altri suggerimenti

Dipende molto da come è costruita la tua pagina. In genere, lo farei usando i CSS e assegnerei al link un ID chiamato "attivo" ... 

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

... e nel CSS ... 

a#active { color: yellow; }

Ovviamente questo è un esempio abbastanza semplicistico, ma illustra l'idea generale.

Puoi farlo senza dover modificare i collegamenti stessi per ogni pagina.

Nel clone Stack Overflow che sto costruendo con Django, sto facendo questo: 

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

Quindi compilando il bodyclass in questo modo nei modelli di pagina: 

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

Quindi, con il seguente CSS, viene evidenziato il collegamento appropriato per ogni pagina: 

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

Imposta una classe sul tag body per ogni pagina (manualmente o sul lato server). Quindi nel tuo CSS usa quella classe per identificare la pagina in cui ti trovi e aggiorna lo stile sull'elemento di conseguenza. 

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

Ecco una buona spiegazione più lunga

Se per qualche motivo non vuoi gestirlo sul lato server, puoi provare questo: 

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

Il codice lato server è il più semplice, semplicemente impostando una classe sul collegamento nella pagina corrente, ma ciò è possibile anche sul lato client con JavaScript, impostando una seconda classe su tutti gli elementi in una particolare classe che hanno un href che corrisponde alla pagina corrente.

Puoi usare document.getElementsByTagName () o document.links [] e cercare solo quelli in una classe che denota i tuoi collegamenti di navigazione e quindi impostare una seconda classe che indica corrente se corrisponde all'URL corrente.

Gli URL saranno relativi, mentre document.URL no. Ma a volte puoi avere lo stesso problema con relativo contro assoluto sul lato server se stai generando contenuti da una progettazione basata su tabella e gli utenti possono comunque inserire URL assoluti o relativi.

Per questo è necessario il codice sul server. Un approccio semplicistico consiste nel confrontare l'URL della pagina corrente con l'URL nel collegamento; tuttavia considera che ci sono molti URL diversi in StackOverflow che risultano tutti evidenziati nella scheda "Domande".

Una versione più sofisticata può mettere qualcosa nella sessione quando cambi pagina (non troppo robusto); memorizzare un elenco di pagine / pattern URL che sono rilevanti per ciascuna voce di menu; o all'interno del codice della pagina stessa, imposta una variabile per determinare quale elemento evidenziare.

Quindi, come suggerisce John Millikin, metti una classe sul link o su uno dei suoi elementi padre come "pagina corrente". che controllerà il colore di esso.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top