Java script e Ajax sem lero lero

Gerenciando abas e links com Jquery

Em JS “puro” teríamos que fazer uns arrays que altera o display para none ou block bla bla bla...Mas no jquery é bem mais fácil que parece, basta adicionarmos ou removermos classes, bom ai vai o script

function jFcontrolaAbas(abre, fecha, btAtivo, botoes){
$('.'+fecha).removeClass('block');
$('#'+abre).addClass('block');

if(botoes != undefined){
$('.'+botoes).removeClass('ativo');
$('#'+btAtivo).addClass('ativo');
}
}

Explicando o começo da função jFcontrolaAbas(abre, fecha, btAtivo, botoes)
abre = id da div que vai exibir
fecha = class de todas div

btAtivo = id do botão que está sendo clicado
botoes = classe de todos botoes

Bom como pode perceber a parte que gerencia as abas é essa aqui :

$('.'+fecha).removeClass('block');
$('#'+abre).addClass('block');

Eu implementei um pouco mais onde ela marca o link também como “ativo” que nada mais é que alterar o estilo do link que você clicou

if(botoes != undefined){
$('.'+botoes).removeClass('ativo');
$('#'+btAtivo).addClass('ativo');
}

Só para relembrar não é necessario usar a função completa você pode usar só a parte das abas ficaria assim a utilização
<a href="javascript: void(0);" onclick="jFcontrolaAbas('aba1', 'abas')">aba um</a>

Porem vou demostrar usando a forma completa, o html fica assim:

Lembrando que, no css as class ficaram assim:

.abas{
display: none;
}

.block{
display: block;
}

.ativo{
font-weight: bold;
background: #f00;
}

O estilo .ativo personalize como precisar.
Ligações jquery

Postado 18/01/2011 11:35 por Jeison Frasson