Con Kairi algo que lo hace muy muy especial es la posibilidad de agregar o quitar clases en una parte
del DOM.
Vamos a crear una clase muy sencilla quien estilos.
Y bueno aquí tenemos de hecho una X activo Border 5 pixeles Solti.
Ya lo veo un poco rara pero bueno nos va a servir para un ejemplo y supongamos que ponemos nuestro selector
y vamos a Dib antólogo por la imagen quien además le ponemos punto AB Class es que asegurarte que venga
de esta forma con la C mayúscula que le ponemos la clase queremos agregar aquí activo y guardo cambios
y recargó y vemos que se ve nuestra clase aquí con el borde en color amarillo y puedo inspeccionar el
elemento y asegurarme que aquí está la clase activo.
Podemos hacer algo más por ejemplo.
De momento tenemos nuestra navegación oculta podemos ponerla aquí y query navegación y navegación con
clase o con Heydi porque tiene las dos y le podemos poner yo para que se muestre y una vez que se ve
podemos poner por ejemplo el primer elemento en activo podremos Simadi cuatri de nuevo y le ponemos
punto navegación y estaremos más o menos aquí y luego tenemos NAP Lehi Nav o l Lehi y la vamos a poner
nada más el primero que diga first le ponemos aquí Class activo igual los cambios recargó y vemos que
le agrega la clase al primer elemento esto también lo podemos hacer por ejemplo en un artículo y vamos
a poner aquí a borrar esto y le ponemos un artículo.
Por ejemplo el primer artículo de todos los que tenemos y vemos que le agrega la clase de esta forma
puedes agregar clases aquí en el DOM Pro-Am ser un ejemplo un poco más atractivo vamos a agregar una
clase activo basado en los elementos en los que le damos clic en nuestro menú y que vamos selector de
nuevo punto navegacion huele Lehi a que sería cada uno de los enlaces que ponemos aquí.
On click Koma función.
Esto va a ejecutar una función y aquí le podemos poner le podemos pasar a este función un evento lo
puedes poner como havent lo vas a ver mucho es como event como é o como Ivete cualquiera de las tres
es lo mismo no Spooner aquí nada más y lo vas a poner punto prevent difcil de todos los días que prueben
Chifflet cuando tú das clic en un enlace y ese enlace tiene una guerra por ejemplo Google.com todas
click y esa al dar clic ese enlace hace su función por default que es llevarte a esa página web con
preven default tú te puedes encargar de que el navegador no haga lo que haría por default.
Puedes prevenir esa acción así que no va a hacer nada pero nos va a ayudar a demostrar el punto que
quiero llegar.
Si recuerdas Díez habíamos dicho que iba a ser la instancia a la que iba.
Si por ejemplo lo de clica este inicio dice es este de inicio se lo explica aquí al blog dices esto
del blog va a ser la parte del diseño o del HTML que ejecute este código.
Vamos a poner punto Class activo y guardo cambio sin recargo vamos que diga quien nosotros misio en
nosotros blog tienda al contacto y podemos ver que se agregan las clases sin embargo puedes ver que
puede dar click a todas y todas se fueron agregando muchos de los menús puedes ver que das las click
y se resalta el logo das click aquí se resalta y el otro se quita eso se hace muy fácil puedes ponerlo
así como signo de gato y podemos copiar este mismo selector y pegarlo aquí y ponerle Remus Class activo
tal vez llegas pero no todos tienen esa clase pues no todos pero no sabemos cuál sea el que lo tenga.
De esta forma nos aseguramos que el que sea que lo tenga le vamos a quitar la clase de activo recargo
por dar clic aquí o aquí aquí o aquí vemos como la clase se agrega y se va quitando de ciertos elementos
de nuestro diseño esa es una de las grandes cosas que tiene Vickery la habilidad de agregar o quitar
clases.
A diferencia de otros frameworks así que queramos o no los comentarios.
Con eso Finalizamos este video y continuamos en el siguiente.