Olá! Bem, eu tenho uma TopBar no meu mini site de pesquisas: http://isearch.baloon.url.ph, e agora peguei um sistema de troca do action do formulário por Javascript, que alterna entre "web, imagens, vídeos e notícias". Porém, o link "Web" já vem selecionado(da cor azul), mas queria que quando o usuário clicasse nos outros links, o clicado fique da cor azul e os outros da cor preta, destacando a escolha de pesquisa feita. Assim segue o exemplo do Babylon Search: http://search.babylon.com, que quando clicamos em imagens, vídeos e notícias, a opção escolhida fica destacada.
-
Mas eu queria fazer isso sem que o usuário precisasse sair da página em que está. Obrigado!– Gustavo Ponte4/10/2014 às 15:30
-
Tem como aplicar a classe "selected" ao clicar no link e desselecionar o link que estava clicado? Ex: o selecionado é o link "web". Ao clicar em imagens, o web desseleciona e o imagens seleciona. E sussecivamente para os outros links. Tem como fazer isso sem mudar de página igual ao Babylon?– Gustavo Ponte4/10/2014 às 15:38
Adicione um comentário
|
1 Resposta
var links = document.querySelectorAll('ul.tabs-title li');
function ativar() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('current');
}
this.classList.add('current');
}
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', ativar);
}
Exemplo: http://jsfiddle.net/62y1mvL9/
Então, esta ideia está dividida em 3 partes:
selecionar todos os elementos a clicar
defenir uma função que executa no click
E aqui nesta função percorrem-se todos os <li>
para remover a classe current
e depois adicionar somente aquele em, que se clicou.
- adicionar o oscultador de evento que chama a função
ativar
quando o elementoli
receber umclick
Usei o HTML no link que colocou na pergunta.
-
Funcionou em parte. Olha só como ficou: isearch.baloon.url.ph, eu já tinha um de class current na página, no hot, super ofertas e top jogos, então a linha de baixo foi para a topbar também. Como eu deixo os da topbar sem linha e os das abas com linha? Acesse para ver: isearch.baloon.url.ph Muito obrigado! 4/10/2014 às 16:01
-
@GustavoBarbosa: crie uma classe nova só para esse menu e use no código que coloquei em cima.– Sergio4/10/2014 às 16:07
-
O current já existia lá em baixo, aí interferiu nos links de cima. 4/10/2014 às 16:10
-
@GustavoBarbosa: crie uma classe nova só para esse menu e use no código que coloquei em cima.– Sergio4/10/2014 às 16:14