Disculpe si esto suena como una pregunta realmente estúpida, pero necesito hacer un cambio de color de enlace cuando se encuentre en la página a la que enlaza.¿Cómo destaco un enlace basado en la página actual?
Por ejemplo, cuando se encuentra en la página "Preguntas" de stackoverflow, el enlace en la parte superior cambia de color. ¿Cómo haces esto?
Es una cosa del lado del servidor: al renderizar la página, agregue una clase como "página actual" al enlace. Luego puedes diseñarlo por separado de los otros enlaces.
Por ejemplo, StackOverflow representa los enlaces con class="youarehere" cuando apunta a la página que ya está activada.
Establezca una clase en la etiqueta del cuerpo para cada página (manualmente o en el lado del servidor). Luego, en su CSS, use esa clase para identificar en qué página se encuentra y actualice el estilo del elemento en consecuencia.
body.questions #questionsTab
{
color: #f00;
}
Usted necesita el código en el servidor para esto. Un enfoque simplista es comparar la URL de la página actual con la URL en el 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 cambia de página (no demasiado robusto); almacenar una lista de patrones de páginas/URL que son relevantes para cada elemento del menú; o dentro del código de la página en sí, 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 "página actual", que controlará el color de la misma.
Realmente depende de cómo esté construida su página. Por lo general, yo haría esto el uso de CSS, y asigno dar el enlace de un identificador de llamada "activa" ...
<a id="active" href="thisPage.html">this page</a>
... y en el CSS ...
a#active { color: yellow; }
Obviamente, esto es un ejemplo bastante simplista, pero ilustra la idea general.
Esto es realmente para lo que debería usarse una clase, no una ID –
Lo siento, John, pero me gustaría diferir aquí. Dado que se trata de un enlace de navegación al que se hizo referencia en la pregunta, y solo aparecerá una vez en la página, una identificación es más apropiada. Si iba a aparecer más de una vez en la página, una clase sería más apropiada. –
¿Y si también tuvieras una clase no activa? Prefiero usar una clase y mantener todo en el mismo tipo, pero cualquiera funciona bien. –
Puede hacerlo sin tener que modificar realmente los enlaces para cada página.
En el clon de desbordamiento de pila que estoy construyendo con Django, que 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>
A continuación, rellenando el bodyclass como tal 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; }
Simplemente curioso, ¿por qué estás construyendo un clon? – eyelidlessness
Como punto de partida para http://stackoverflow.com/questions/172516/ –
S El código secundario de ERVER es el más fácil, simplemente configurando una clase en el enlace en 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 en una clase particular que tiene un href que coincide 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. Pero a veces puede tener este mismo problema con relativo vs. absoluto en el lado del servidor si está generando contenido a partir de un diseño basado en tablas y los usuarios pueden poner URL absolutas o relativas de todos modos.
Si por alguna razón usted 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';
}
}
este onload() es un poco confuso. Probablemente window.onload = function() {} es mejor – Bor
pregunta está bien formado. Entonces no es estúpido :) –