1
00:00:00,330 --> 00:00:07,330
Vamos a finalizar nuestro pequeño ejemplo que pone en práctica y como en todo junto lo que hemos desarrollado

2
00:00:07,330 --> 00:00:13,570
o lo que aprendimos en el video anterior o en el capítulo anterior donde aprendimos lo básico y Cuadri.

3
00:00:13,710 --> 00:00:17,050
De momento tenemos dos líneas de Discovery.

4
00:00:17,490 --> 00:00:23,070
Puedes ver que estamos seleccionando el primer dip que es hijo de nuestros servicios que vendría siendo

5
00:00:23,590 --> 00:00:24,840
este aquí.

6
00:00:24,870 --> 00:00:32,430
Los otros dos los hemos ocultado con CSS sin embargo vamos a controlar cómo se muestra no se ocultan

7
00:00:32,790 --> 00:00:40,800
con Riccheri y también hemos destacado el primer enlace con esta línea de código donde seleccionamos

8
00:00:40,800 --> 00:00:44,280
el primer enlace y le agregamos la clase de activo.

9
00:00:44,280 --> 00:00:51,790
También estaremos manejando que una vez que presioné en por ejemplo el segundo deje de estar resaltado

10
00:00:51,790 --> 00:00:53,310
y que se resalte.

11
00:00:53,380 --> 00:00:54,430
Vamos a hacer todo eso.

12
00:00:54,430 --> 00:01:00,700
En este vídeo crear aquí un pequeño código vamos a ponerlo aquí.

13
00:01:00,740 --> 00:01:12,490
Servicios a que vendría siendo nuestra navegación de aquí arriba iras por el punto on click aquí vamos

14
00:01:12,490 --> 00:01:21,370
a crear una función externa poner aquí mostrar Tabs y ponemos un función mostrar taps

15
00:01:24,880 --> 00:01:29,530
y vamos a comenzar a trabajar crear nuestro código.

16
00:01:29,530 --> 00:01:37,450
Primero vamos a crear una variable que se llama Enlace y aquí vamos a capturar este HR-V puedes ver

17
00:01:37,450 --> 00:01:40,310
que el HR-V hace referencia a los Eiriz.

18
00:01:40,510 --> 00:01:49,670
Por lo tanto estaremos creando esa relación aquí selector aprendiz para que tome el enlace de lo que

19
00:01:49,670 --> 00:01:50,650
haya hecho click.

20
00:01:50,750 --> 00:01:55,930
Puede ser que haya sido aquí o aquí o aquí no sabemos cual el usuario vaya a presionar.

21
00:01:55,930 --> 00:02:03,940
Sin embargo Condis sabremos de dónde viene ese click y accedemos al atributo CTR y le ponemos HR-V.

22
00:02:03,950 --> 00:02:12,260
Por lo tanto estamos asignando el HR-V de cada uno de estos botones a la variable enlace y aquí le puedes

23
00:02:12,260 --> 00:02:17,910
poner un Consol log enlace y hacer la prueba.

24
00:02:17,910 --> 00:02:23,780
Vamos a abrir nuestra consola ponemos la consola y damos clic por ejemplo en viajes y vemos que aparece

25
00:02:23,780 --> 00:02:30,850
aquí viajes damos clic en asesoría y vemos que aparece asesoría transporte asesoría y podemos seguir

26
00:02:30,850 --> 00:02:32,760
dando clic en todos ellos.

27
00:02:33,880 --> 00:02:41,330
Y durar todo el día haciendo esto sin embargo hay más trabajo por hacer ya estamos capturando el enlace

28
00:02:41,470 --> 00:02:48,920
que podemos ver que tiene el Heydi así que vamos a quitar esta parte y en este caso lo que haremos será

29
00:02:48,920 --> 00:03:01,060
crear más de seleccionar todos los ser en lo que esté en nuestros servicios a todos los dips y ponemos

30
00:03:01,060 --> 00:03:10,400
algo así como nuestros servicios y todos los dips que estén ponemos aquí un para ocultarlos.

31
00:03:10,400 --> 00:03:16,250
O sea que cuando dé clic aquí se van a ocultar y tengo que mostrar el que le haya dado click.

32
00:03:16,370 --> 00:03:23,110
Lo ponemos con el selector y luego lo ponemos enlace porque ya lo tenemos capturado en esta variable

33
00:03:23,570 --> 00:03:30,660
X le ponemos you igual al cambio se recargo lo expliqué en asesoría y vemos que cambia.

34
00:03:30,670 --> 00:03:34,740
Hace asesoría hay cursos transporte y también que haya transporte.

35
00:03:34,740 --> 00:03:36,960
Puedes ver que se da este pequeño brinco.

36
00:03:36,990 --> 00:03:46,200
Quieres podrías poner un ratón Fonds y recargó y puedo dar clic ahora si aquí vemos que no brinca hay

37
00:03:46,220 --> 00:03:52,610
algo que estamos perdiendo aún es que si por ejemplo en asesoría sigue resaltado viajes así que podríamos

38
00:03:52,610 --> 00:03:55,330
ponerle en esta parte nuestros.

39
00:03:55,330 --> 00:04:03,890
El lector puede copiar aquí pego ir poner aquí.

40
00:04:04,340 --> 00:04:13,040
No importa cuál sea el que la tenga quiero que la remueva y recargo doy click aquí y veamos que ya la

41
00:04:13,040 --> 00:04:14,570
remueve.

42
00:04:14,570 --> 00:04:20,060
Ahora falta nada más agregarse la que haya dado clic porque puedes ver que los viajes no se resalta

43
00:04:21,280 --> 00:04:24,530
en ninguno de ellos puedo agregarlo con

44
00:04:27,380 --> 00:04:34,200
diez Glass y quiero pronaos activo y guardo cámbiese recargo.

45
00:04:34,250 --> 00:04:42,060
Ahora estamos en viajes de en asesoría se queda asesoria resaltado transporte viajes etcétera y este

46
00:04:42,060 --> 00:04:47,880
tipo de ejemplos es muy común verlo en páginas web puedes ver mucho código que hay que agregar es muy

47
00:04:47,880 --> 00:04:56,890
sencillo y de esta forma puedes tener un top como éste que encuentras en Franjo muy populares como vostra

48
00:04:57,020 --> 00:05:00,230
Fondation pero puedes ver que compró allí Cuadri.

49
00:05:00,250 --> 00:05:08,030
Es sencillo de hacer aquí va a cambiar estos métodos de joie por Feith out y aquí por Feith infraccion

50
00:05:08,030 --> 00:05:14,860
métodos que me gustan un poco más en este efecto así como de desvanecerse sin embargo esto fue lo que

51
00:05:14,860 --> 00:05:15,370
pedimos.

52
00:05:15,370 --> 00:05:21,320
Algo que podemos poner en práctica allí Kairi y tal vez llegas bueno y siempre que tenga que hacer algo

53
00:05:21,320 --> 00:05:29,060
así por ejemplo una galería algo de ese estilo tengo que crear todo este código yo Bueno no a partir

54
00:05:29,060 --> 00:05:36,170
del siguiente capítulo estaremos trabajando con plugins de Coeuré que te harán la vida mucho más sencillo

55
00:05:37,040 --> 00:05:46,390
y agregarán funcionalidad más complicada a tu sitio web con muy pocas líneas de código para eso tendremos

56
00:05:46,390 --> 00:05:49,540
que volver a nuestro sitio web de eje de la webcam.