Itens lista UL - add e remover classes jQuery

[Kimura 0]

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');
		}
	});

[William Bruno 1501]

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 !

 

^_^

 

$('.categoria li').click(function(){
      $('.categoria li').removeClass('ativo');
      $(this).addClass('ativo');
});

e pronto! :lol:

 

testa ai.

[Kimura 0]

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.

[William Bruno 1501]

hum... ainda acho 'que dá' ^_^

 

posta o css ai

[Kimura 0]

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)