0

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.

2
  • Mas eu queria fazer isso sem que o usuário precisasse sair da página em que está. Obrigado! 4/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? 4/10/2014 às 15:38

1 Resposta 1

2
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 elemento li receber um click

Usei o HTML no link que colocou na pergunta.

4
  • 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.
    – Sergio
    4/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.
    – Sergio
    4/10/2014 às 16:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .