HTML - navegacion entre TABS con btones

 
Vista:

navegacion entre TABS con btones

Publicado por tere (1 intervención) el 19/10/2017 20:37:19
hola, he estado trabajando en un formulario con pestañas pero tengo un problema, a continuación les explico mi duda, espero y puedan ayudarme.

Estoy haciendo un formulario con varias pestañas (DATOS GENERALES, INFORMACION ESCOLAR, ANTECEDESNTES DE EMPLEOS).
lo que necesito es saber como puedo pasar de una pestaña a otra con un BOTON que diga SIGUIENTE sin perder los datos de la pestaña anterior (de tal manera que si yo quiero checar los datos antes de ingresarlos a la base de datos pueda verlos) y as sucesivamente hasta llegar a la ultima pestaña.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

navegacion entre TABS con btones

Publicado por Lopez (271 intervenciones) el 20/10/2017 15:02:53
Hola Tere,

Hay varias alternativas a lo que buscas.
Una puede ser Ajax (Sin recargas de contenido), otra HTML5 localstorage (Que guarda el valor en el input) por un rato,
o el clásico y muy recomendado trabajo con sesiones.

Si requieres más ayuda en el tema, te recomiendo crear un nuevo tema,
en el foro del lenguaje de programación que usaras para trabajar con la Base de datos (PHP, .NET etc).

Espero haber podido ayudar.
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

navegacion entre TABS con btones

Publicado por tere (2 intervenciones) el 20/10/2017 16:43:00
hola, gracias por tu respuesta, he utilizado como has dicho sesiones para poder recuperar los datos, el problema es que cuando yo presiono el botn de SIGUIENTE me carga la pestaña numero dos pero me borra la pestaña numero uno, no se que me podrias recomendar para que no me borre la pestaña anterior. GRACIAS!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

navegacion entre TABS con btones

Publicado por Lopez (271 intervenciones) el 20/10/2017 18:25:27
Hola Tere,

Genial hayas resuelto tan rápido!
Pues, dependerá mucho de la estructura de tu código.
Podrías compartirlo, así podamos ayudarte mas libremente =)

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

navegacion entre TABS con btones

Publicado por tere (2 intervenciones) el 23/10/2017 19:30:47
hola..claro que si...mira este es el código que utilizo para crear pestañas implementando radiobuttons con estilos css

CODIGO PESTAÑAS PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<body>
<link rel="stylesheet" type="text/css" href="Estilos.css">
 <!--Contenedor-->
 <div id="container">
  <!--Pestaña 1 activa por defecto-->
  <input id="tab-1" type="radio" name="tab-group" checked="checked"/>
  <label for="tab-1">DATOS GENERALES </label>
  <!--Pestaña 3 inactiva por defecto-->
  <input id="tab-3" type="radio" name="tab-group" />
  <label for="tab-3">ANTECEDENTES GINECO_OBSTETRICOS</label>
  <!--Pestaña 4 inactiva por defecto-->
  <input id="tab-4" type="radio" name="tab-group" />
  <label for="tab-4">ANTECEDENTES PATOLOGICOS</label>
   <!--Pestaña 5 inactiva por defecto-->
  <input id="tab-5" type="radio" name="tab-group" />
  <label for="tab-5">ATENCION MEDICA OTROGADA</label>
  <!--Contenido a mostrar/ocultar-->
  <div id="content">
   <!--Contenido de la Pestaña 1-->
   <div id="content-1">
    <p class="left"><iframe id="DG" src="DatosGenerales.php"></iframe>
    </p>
   </div>
   <!--Contenido de la Pestaña 3-->
   <div id="content-3">
    <p><iframe id="AGO" src="AnteGineObs.php"></iframe></p>
   </div>
 <!--Contenido de la Pestaña 4-->
   <div id="content-4" >
    <p><iframe id="AP" src="AntePato.php"></iframe></p>
   </div>
   <!--Contenido de la Pestaña 5-->
   <div id="content-5">
    <p><iframe id="AMO" src="AtenMedica.php"></iframe></p>
   </div>
      <!--Contenido de la Pestaña 6-->
  </div>
 </div>
</body>



CODIGO ESTILOS CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
* {
 font-family: times new roman;
position: relative;
 
 
}
#DatosMedico {
 width: 50em; /* Ancho del contenedor */
 height: 50em;
 
 text-align: left;
 
}
 
#CalenProxCitas{
 margin: 1 auto;
 width: 100%; /* Ancho del contenedor */
 position: relative;
 text-align: left;
}
 
#Semaforo{
 margin: 1 auto;
 width: 100%; /* Ancho del contenedor */
 position: relative;
 text-align: left;
 
}
 
#tablaTitulo{
	border: 0;
	width: 100%;
	align-content: center;
	position: relative;
}
#container {
 margin: 0 auto;
 width: 100%; /* Ancho del contenedor */
 
 
}
#container input {
 height: 2.5em;
 visibility: hidden;
}
#container label {
 background: #f9f9f9; /* Fondo de las pestañas */
 border-radius: .25em .25em 0 0;
 color: #888; /* Color del texto de las pestañas */
 cursor: pointer;
 display: block;
 float: left;
 font-size: 1em; /* Tamaño del texto de las pestañas */
 height: 2.5em;
 line-height: 2.5em;
 margin-right: .25em;
 padding: 0 1.5em;
 text-align: center;
}
#container input:hover + label {
 background: #ddd; /* Fondo de las pestañas al pasar el cursor por encima */
 color: #666; /* Color del texto de las pestañas al pasar el cursor por encima */
}
#container input:checked + label {
 background: #f1f1f1; /* Fondo de las pestañas al presionar */
 color: #444; /* Color de las pestañas al presionar */
 position: relative;
 z-index: 6;
}
#content {
 background: #f1f1f1; /* Fondo del contenido */
 border-radius: 0 .25em .25em .25em;
 min-height: 100%; /* Alto del contenido */
 position: relative;
 width: 100%;
 z-index: 5;
}
#content div {
 opacity: 0;
 padding: .5em;
 position: absolute;
 z-index: -100;
}
 
#content-3 p,
#content-3 ul {
 margin-bottom: 1em;
}
#content-3 ul {
 margin-left: 2em;
}
 
#content-4 p,
#content-4 ul {
 margin-bottom: 1em;
}
#content-4 ul {
 margin-left: 2em;
}
 
#content-5 p,
#content-5 ul {
 margin-bottom: 1em;
}
#content-5 ul {
 margin-left: 2em;
}
 
 
#container input#tab-1:checked ~ #content #content-1,
#container input#tab-3:checked ~ #content #content-3,
#container input#tab-4:checked ~ #content #content-4,
#container input#tab-5:checked ~ #content #content-5
{
 opacity: 1;
 z-index: 100;
}
 
#DG{
 width: 80em; /* Ancho del contenedor */
 height: 35em;
 border: 0em;
 
}
#AGO{
 width: 80em; /* Ancho del contenedor */
 height: 35em;
 border: 0em;
}
 
#AP{
 width: 80em; /* Ancho del contenedor */
 height: 35em;
 border: 0em;
}
 
#AMO{
 width: 80em; /* Ancho del contenedor */
 height: 35em;
 border: 0em;
}


EN LA IMAGEN SE PUEDE VER MAS O MENOS LO QUE OBTENGO COMO RESULTADO Y JUNTO CON LOS BOTONES QUE DICEN SIGUIENTE PARA AVANZAR DE PESTAÑA EN PESTAÑA QUE ES EN LO QUE TENGO PROBLEMA.....GRACIAS POR LA AYUDA!!!


2017-10-23
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

navegacion entre TABS con btones

Publicado por Lopez (271 intervenciones) el 29/10/2017 02:26:09
Hola Tere,

Disculpa la demora, esta semana fue re ocupada.
Ya veo, podrias aportarle un poco de Javascript,
para ir "paginando" el contenido. Imagino, este boton "siguiente" depende contesten el tab cierto?.

Quedo atento a tu comentario,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar