¿Cómo resalto un enlace basado en la página actual?

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

  •  05-07-2019
  •  | 
  •  

Pregunta

Lo siento si esto suena como una pregunta realmente estúpida, pero necesito cambiar el color de un enlace cuando estás en la página a la que se vincula.

Por ejemplo, cuando está en las " Preguntas " En la página de stackoverflow, el enlace en la parte superior cambia de color. ¿Cómo haces esto?

¿Fue útil?

Solución

Es una cuestión del lado del servidor: al representar la página, agregue una clase como " current-page " al enlace. Luego puede diseñarlo por separado de los otros enlaces.

Por ejemplo, StackOverflow representa los enlaces con class = " youarehere " cuando apunta a la página en la que ya está.

Otros consejos

Realmente depende de cómo se construya su página. Por lo general, lo haría usando CSS y asignaría a la identificación un enlace llamado "activa" " ... 

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

... y en el CSS ... 

a#active { color: yellow; }

Obviamente, este es un ejemplo bastante simplista, pero ilustra la idea general.

Puede hacer esto sin tener que modificar los enlaces para cada página.

En el clon Stack Overflow que estoy construyendo con Django, estoy haciendo esto: 

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

Luego complete el bodyclass como en las plantillas de página: 

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

Luego, con el siguiente CSS, se resalta el enlace apropiado para cada página: 

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

Establezca una clase en la etiqueta del cuerpo para cada página (manualmente o del lado del servidor). Luego, en tu CSS, utiliza esa clase para identificar en qué página estás y actualizar el estilo en el elemento correspondiente. 

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

Aquí hay una buena explicación más larga

Si, por alguna razón, no quiere manejar esto en el lado del servidor, puede intentar esto: 

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

El código del lado del servidor es el más fácil, simplemente configurando una clase en el enlace de la página actual, pero esto también es posible en el lado del cliente con JavaScript, configurando una segunda clase en todos los elementos de una clase particular que tienen un href que coincide con la página actual.

Puede usar document.getElementsByTagName () o document.links [] y buscar solo aquellos en una clase que denota sus enlaces de navegación y luego establecer una segunda clase que denote actual si coincide con la URL actual.

Las URL serán relativas, mientras que document.URL no lo será. Pero a veces puede tener este mismo problema con relativo frente a absoluto en el lado del servidor si está generando contenido a partir de un diseño basado en tablas y los usuarios pueden poner URLs absolutas o relativas de todos modos.

Necesitas código en el servidor para esto. Un enfoque simplista es comparar la URL de la página actual con la URL del enlace; sin embargo, tenga en cuenta que hay muchas URL diferentes en stackoverflow que dan como resultado que se resalte la pestaña 'Preguntas'.

Una versión más sofisticada puede poner algo en la sesión cuando cambias de página (no demasiado robusto); almacenar una lista de páginas / patrones de URL que son relevantes para cada elemento del menú; o dentro del código de la propia página, establezca una variable para determinar qué elemento resaltar.

Luego, como sugiere John Millikin, coloque una clase en el enlace o en uno de sus elementos principales, como " current-page " que controlará el color de la misma.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top