Temas > Programacion > Java script - Java > Metodos addClass y removeClass en jQuery
Julio

Los métodos addClass y removeClass nos permiten asociar 
y desasociar una clase a un elemento o conjunto de elementos 
HTML.
Disponer un div con un conjunto de párrafos. Cuando se presione
un botón asociarle una clase y cuando se presione otro desasociarlo
de dicha clase. 
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <input type="button" id="boton1" value="Asociar clase">
 <input type="button" id="boton2" value="Desasociar
 clase">
 <div id="descripcion">
 <p>HTML es el lenguaje que se emplea para el desarrollo de
 páginas de internet.</p>
 <p>Este lenguaje está constituido de elementos que el
 navegador interpreta y las despliega en la pantalla de acuerdo 
 a su objetivo. Veremos que hay elementos para disponer
 imágenes sobre una página, hipervínculos que nos permiten 
 dirigirnos a otra página, listas, tablas para tabular datos, etc.</b>
 <p>Para poder crear una página HTML se requiere un simple
 editor de texto (en nuestro caso emplearemos este sitio) y un
 navegador de internet (IExplorer, FireFox etc.), emplearemos el 
 navegador que en este preciso momento está utilizando (recuerde
 que usted está viendo en este preciso momento una página HTML
 con su navegador).</p>
 <p>Lo más importante es que en cada concepto desarrolle los
 ejercicios propuestos y modifique los que se presentan ya resueltos.
 <p><p>Este curso lo que busca es acercar el lenguaje HTML a una
 persona que nunca antes trabajó con el mismo. No pretende 
mostrar  todas los elementos HTML en forma alfabética.</p>
 <p>Como veremos, de cada concepto se presenta una parte
 teórica,
 en la que se da una explicación completa, luego se pasa a la
 sección del ejercicio resuelto donde podemos ver el contenido
de la página HTML y cómo la visualiza el navegador.
 Por último y tal vez la sección más importante de este
 tutorial es donde se propone que usted haga páginas en forma
autónoma (donde realmente podrá darse cuenta si el concepto
 quedó firme).</p>
 </div>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
   var x=$("#boton1");
   x.click(asociarClase);
   x=$("#boton2");
   x.click(desasociarClase);
 }
 function asociarClase()
 {
   var x=$("#descripcion");
   x.addClass("recuadro");
 }
 function desasociarClase()
 {
   var x=$("#descripcion");
   x.removeClass("recuadro");
 }
?>//esto no va
estilos.css
<?php //esto no va
 .recuadro {
   background-color:#ffffcc;
   font-family:verdana;
   font-size:14px;
   border-top-width:1px;
   border-right-width:3px;
   border-bottom-width:3px;
   border-left-width:1px;
   border-top-style:dotted;
   border-right-style:solid;
   border-bottom-style:solid;
    border-left-style:dotted;
    border-top-color:#ffaa00;
    border-right-color:#ff0000;
    border-bottom-color:#ff0000;
    border-left-color:#ffaa00;
 }
?>//esto no va
Tengamos bien en cuenta que en el archivo HTML debemos 
indicar donde se encuentran los archivos js y css:
<?php //esto no va
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
?>//esto no va
Cuando se presiona el botón asociar hoja de estilo se ejecuta la
función:
<?php //esto no va
function asociarClase()
{
   var x=$("#descripcion");
   x.addClass("recuadro");
}
?>//esto no va
Donde llamamos al método addClass con el nombre de la clase 
(dicha clase debe estar definida en la hoja de estilo (css).
De forma similar para desasociar una clase se ejecuta la función:
<?php //esto no va
function desasociarClase()
{
   var x=$("#descripcion");
   x.removeClass("recuadro");
}
?>//esto no va
donde llamamos al método removeClass a partir de un objeto jQuery.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar