Como posso destacar um link com base na página atual?

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

  •  05-07-2019
  •  | 
  •  

Pergunta

Desculpe se isso soa como uma pergunta muito estúpida, mas eu preciso fazer uma mudança de cor link quando você está na página de links para ele.

Por exemplo, quando você está na página de "Perguntas" do stackoverflow, o link na parte superior muda de cor. Como você faz isso?

Foi útil?

Solução

É uma coisa do lado do servidor - quando o processamento da página, adicionar uma classe como "current-page" para o link. Depois, você pode denominá-lo separadamente dos outros links.

Por exemplo, StackOverflow torna as ligações com class="youarehere" quando se aponta para a página que você já está.

Outras dicas

Ela realmente depende de como a sua página é construída. Normalmente, eu faria isso usando CSS, e atribuir dar o link de um ID de chamada "ativa" ... 

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

... e no CSS ... 

a#active { color: yellow; }

Obviamente este é um exemplo bastante simplista, mas ilustra a idéia geral.

Você pode fazer isso sem ter que modificar-se os links para cada página.

No clone Stack Overflow eu estou construindo com Django, eu estou fazendo isso: 

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

Depois de preencher o bodyclass como assim em modelos de página: 

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

Em seguida, com o seguinte CSS, no link apropriado é destacado 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; }

Definir uma classe sobre a tag body para cada página (manualmente ou server-side). Então, em seu uso CSS essa classe para identificar qual página você está no e atualizar o estilo sobre o item em conformidade. 

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

Aqui está uma boa explicação mais longa

Se por algum motivo você não quer lidar com isso no lado do servidor, você pode tentar o seguinte: 

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

código do lado do servidor é o mais fácil, por apenas definindo uma classe no link na página atual, mas isso também é possível no lado do cliente com JavaScript, estabelecendo uma segunda classe em todos os elementos em uma determinada classe que têm um href que corresponde à página atual.

Você pode usar tanto document.getElementsByTagName () ou document.links [] e olhar apenas para aqueles em uma classe que denota seus links de navegação e, em seguida, definir uma segunda classe que denota atual se ele corresponde a URL atual.

As URLs será relativa, enquanto document.URL não. Mas às vezes você pode ter este mesmo problema com vs. relativa absoluta no lado do servidor se você estiver gerando conteúdo de um projeto orientado a mesa e os usuários podem colocar qualquer URLs absolutos ou relativos de qualquer maneira.

Você precisa de código no servidor para isso. Uma abordagem simplista é comparar o URL da página atual para a URL na ligação; contudo, considerar que existem muitos URLs diferentes em stackoverflow que resultam em guia 'Perguntas' sendo destacadas.

A versão mais sofisticada pode colocar algo na sessão quando você mudar de página (não muito robusta); armazenar uma lista de páginas / padrões de URL que são relevantes para cada item do menu; ou dentro do código da própria página, defina uma variável para determinar qual item de destaque.

Então, como John Millikin sugere, coloque uma aula sobre o link ou em um de seus elementos pai como "current-page", que irá controlar a cor do mesmo.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top