Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
O script abaixo dá a ação de mudança de classe quando algum item é acionado, entretanto os outros se mantém com as suas classes iniciais. Como posso melhorar este script? Ele está com muitas condições.
Explicação rápida:
classes iniciais: .ensino-superior | .escolas | .saude | .variedades
classes ativas: .ensino-superior-ativo | .escolas-ativo | .saude-ativo | .variedades-ativo
$('.categoria li').click(function()
{
var classe = $(this).attr('class');
if(classe == 'ensino-superior')
{
$(this).removeClass(classe).addClass(classe+'-ativo');
$('.escolas-ativo').removeClass('escolas-ativo').addClass('escolas');
$('.saude-ativo').removeClass('saude-ativo').addClass('saude');
$('.variedades-ativo').removeClass('variedades-ativo').addClass('variedades');
}
if(classe == 'escolas')
{
$(this).removeClass(classe).addClass(classe+'-ativo');
$('.ensino-superior-ativo').removeClass('ensino-superior-ativo').addClass('ensino-superior');
$('.saude-ativo').removeClass('saude-ativo').addClass('saude');
$('.variedades-ativo').removeClass('variedades-ativo').addClass('variedades');
}
if(classe == 'saude')
{
$(this).removeClass(classe).addClass(classe+'-ativo');
$('.ensino-superior-ativo').removeClass('ensino-superior-ativo').addClass('ensino-superior');
$('.escolas-ativo').removeClass('escolas-ativo').addClass('escolas');
$('.variedades-ativo').removeClass('variedades-ativo').addClass('variedades');
}
if(classe == 'variedades')
{
$(this).removeClass(classe).addClass(classe+'-ativo');
$('.ensino-superior-ativo').removeClass('ensino-superior-ativo').addClass('ensino-superior');
$('.escolas-ativo').removeClass('escolas-ativo').addClass('escolas');
$('.saude-ativo').removeClass('saude-ativo').addClass('saude');
}
});Pois é, mas não dá pra generalizar, pois os meus itens são sprites css, cada um (tanto os iniciais quanto os ativos) tem a sua própria coordenada.
hum... ainda acho 'que dá' ^_^
posta o css ai
Não tenho permissão William, o projeto está em construção sigilosa.
É uma lista simples:
<ul>
<li class='ensino-superior'>#</li>
<li class='escolas'>#</li>
<li class='saude'>#</li>
<li class='variedades'>#</li>
</ul>O css trata cada elemento da lista dando tamanho, fundo (background sprite), espaçamento e tal.
Também tenho uma classe para cada item quando ativado, fundo diferente, espaçamento etc.
Obs.: o fundo é uma imagem contendo um texto (fonte diferente e tals)
hum... pq não faz uma classe genérica:
.ativo ?
lembre-se que CSS suporta multiplas classes:
class="tal ativa" separando por espaços.
só nessa brincadeira de CSS, podemos reduzir:
$(this).removeClass(classe).addClass(classe+'-ativo'); para:
$(this).addClass('ativo');mas ai vem a questão: Você precisa remover a classe ativa dos outros... hum..
então remova antes de fazer qualquer coisa:
$('.ensino-superior, .escolas, .saude, .variedades').removeClass('ativo');ai logo abaixo, você atribui:
$(this).addClass('ativo');opa !
^_^
});e pronto! :lol:testa ai.