1 reply to this topic

[marceloplis]

Galera, eu fiz uma página com menu de abas e cada item de menu chama uma página via Ajax e carrega minha div conteudo. Até aqui funcionou belezinha, meu problema é ao clicar nas opções de menu destacar a opção clicada e as outras opções deixar default, exemplo:

Supondo que tenho:
Aba 1 | Aba 2 | Aba 3

Supondo que o default selecionado é a "Aba 1", como faço para ao clicar na opção Aba 2 e carregar o respectivo conteúdo por ajax, deixar assim:
Aba 1 | Aba 2 | Aba 3, mudar o estilo conforme a aba selecionada ??

Espero ter sido esclarecedor !!!

Valew.

[bimonti]

Não sei como está o seu código fonte dessas abas, mas supondo que seja assim:

<ul id="menu">
<li id="1" onclick="muda(this);">Aba 1</li>
<li id="2" onclick="muda(this);">Aba 2</li>
<li id="3" onclick="muda(this);">Aba 3</li>
</ul>

Eu já coloquei a chamada pra função nas opções, e a mesma seria assim:

function muda(el){
var elementos = document.getElementById('menu').getElementsByTagName('li');
  for(var x=0;x<elementos.length;x++){
	elementos[x].style.font = '12px normal Arial';
  }
  el.style.font = '12px bold Arial';
}

A função é simples também, eu pego todos os elementos dentro da lista e mudo o estilo para texto normal. Depois eu mudo só o estilo do elemento clicado para negrito.

Atente para o fato que eu não testei o código, escrevi direto aqui no fórum mas creio que funcione. E imagino também que você sabe como fazer as requisições em AJAX funcionarem, senão é só acrescentar mais um parâmetro na chamada da função muda(); e dentro dela fazer a requisição. Mas isso é outra história, e se tiver dúvidas pergunte novamente que eu moverei o seu topico para a seção correta.

Até mais.

Edição feita por: bimonti, 05/01/2007, 16:35.