Stylesheet switcher | Trocando de estilo | jQuery

Mais uma dica rápida.

Sabe aqueles sites que tem alguns botões para trocar de cor de fundo / layout? Então, hoje eu vou explicar como fazer isso facilmente com jQuery.

Como todo mundo já sabe, eu não sou de enrolar colocando aqueles textos enormes, vamos direto ao ponto.

Preparando o html

<ul id="menu">
	<li><a href="#" rel="1.css">Estilo 1</a></li>
	<li><a href="#" rel="2.css">Estilo 2</a></li>
	<li><a href="#" rel="3.css">Estilo 3</a></li>
</ul>

Aqui temos 3 links, os 3 links apontam para estilos diferentes (1.css, 2.css, 3.css).

Os estilos

Você faz o que quiser, como eu não estou ganhando pra isso, vou fazer um bem simples (um não, 3 ).

1.css

body {
	color: #FFF;
	font-family: Arial;
	background: #000;
}

2.css

body {
	color: #000;
	font-family: Verdana;
	background: #FFF;
}

3.css

body {
	color: #FFF;
	font-family: Arial;
	background: #c0c0c0;
}

- Dom Ruan, já criei os estilos, mais não tá funcionando…..
- Calma meu pupilo. Tudo tem seu tempo na vida. Eu ainda nem falei do jQuery.

jQueeeeeeeery

Vamos dar aquela pitadinha de javascript. Po sem jQuery não tem graça ¬¬.

$(document).ready(function() {
	$("#menu li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});

Precisa explicar?

Tá bom meu discípulo, eu te dou esta colher de chá.

1. Você sabe pra que serve o $(document).ready(function() { funciona né?
2. Para cada a eu adiciona na função click aquele código.
3. Pega o atribulo REL do a e coloco no atributo HREF do link

Pronto.

Da uma olhada no DEMO.

Beijo do #Nerd.