Return to Snippet

Revision: 24822
at March 12, 2010 04:36 by arantxaortega


Initial Code
<html>
<head>
<!-- Enlazamos el Framework de jQuery-->
<!-- 
En el HTML debemos indicar en el enlace class="selector_estilo" y rel="estilo1" y en el rel del a estilo 2, etc... como el nombre del title del CSS correspondiente.
Y el enlace de CSS debe contener el title que sea igual que el rel del enlace y además del rel="stylesheet", debemos indicar "alternate de la siguiente forma <link rel="stylesheet alternate"....
 -->
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/selectorEstilo.js"></script>
  <script type="text/javascript">
  //<![CDATA[
	$(document).ready(function(){
		$.estiloInicial('estilo1');
		$('.selector_estilo').bind('click', function() {
			$.estableceEstilo(this.getAttribute('rel'));
			return false;
		});
	});
  //]]>
  </script>
  <link rel="stylesheet" type="text/css" href="css/estilo1.css" title="estilo1" />
  <link rel="stylesheet alternate" type="text/css" href="css/estilo2.css" title="estilo2" />
  <link rel="stylesheet alternate" type="text/css" href="css/estilo3.css" title="estilo3" />
</head>

<body>
<noscript>
Si no tenemos javascript activado saldrá este mensaje
</noscript>

<ul>
  <li><a href="#" class="selector_estilo" rel="estilo1" title="">Estilo1</a></li>
  <li><a href="#" class="selector_estilo" rel="estilo2" title="">Estilo2</a></li>
  <li><a href="#" class="selector_estilo" rel="estilo3" title="">Estilo3</a></li>
</ul>

</body>
</html>

Initial URL

                                

Initial Description

                                

Initial Title
Change CSS with JavaScript (HTML)

Initial Tags
javascript, html

Initial Language
HTML