Foros del Web » Creando para Internet » HTML »

Tabs o pestañas en html

Estas en el tema de Tabs o pestañas en html en el foro de HTML en Foros del Web. Hola [email protected] necesito ayuda con pestañas o tabs, como le quieran llamar Resulta que ya tengo un html con tabs sin embargo quiero que funcione ...
  #1 (permalink)  
Antiguo 09/12/2012, 14:01
 
Fecha de Ingreso: junio-2011
Mensajes: 43
Antigüedad: 10 años, 7 meses
Puntos: 3
Tabs o pestañas en html

Hola [email protected] necesito ayuda con pestañas o tabs, como le quieran llamar

Resulta que ya tengo un html con tabs sin embargo quiero que funcione similar a esta pagina:
Ejemplo


Que en el contenido de la tab activa aparezca un link que pueda abrir otra tab en la misma pagina... no se si comprenden la idea, solo que no quiero usar js, por eso me preguntaba si saben como hacerlo en html alguna ayuda??? se los agradecería.

O si conocen una mejor manera de hacerlo en JS diganmelo tambien, de antemano muchas gracias.
__________________
"Esta es mi firma"
  #2 (permalink)  
Antiguo 09/12/2012, 14:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 5 meses
Puntos: 2113
Respuesta: Tabs o pestañas en html

Según ese ejemplo concreto bastaría con que pusieras un enlace de este tipo:

Código HTML:
Ver original
  1. <a href="#css" onclick="mostrarPestaña(pestañas, this); return false">abrir pestaña CSS</a>

Que es la misma forma que usa esa misma página.
  #3 (permalink)  
Antiguo 10/12/2012, 06:11
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 11 años, 3 meses
Puntos: 48
Respuesta: Tabs o pestañas en html

Se podría hacer con el pseudo selector de CSS3 ":target", aunque no lo soportan todos los navegadores.
Aquí hay un ejemplo de cómo se puede usar: CSS3-Only Tabbed Area
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España

Última edición por Trublux; 10/12/2012 a las 06:15 Razón: Añadir una web con una explicación
  #4 (permalink)  
Antiguo 10/12/2012, 07:01
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 7 meses
Puntos: 1011
Respuesta: Tabs o pestañas en html

aquí tienes uno con la pseudo-clase :checked (no es soportado por i8-). elimina el javascript no afecta al resultado
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 10/12/2012, 12:33
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 6 meses
Puntos: 1567
Respuesta: Tabs o pestañas en html

Cita:
Iniciado por karnaldo Ver Mensaje
Hola [email protected] necesito ayuda con pestañas o tabs, como le quieran llamar

Resulta que ya tengo un html con tabs sin embargo quiero que funcione similar a esta pagina:
Ejemplo


Que en el contenido de la tab activa aparezca un link que pueda abrir otra tab en la misma pagina... no se si comprenden la idea, solo que no quiero usar js, por eso me preguntaba si saben como hacerlo en html alguna ayuda??? se los agradecería.

O si conocen una mejor manera de hacerlo en JS diganmelo tambien, de antemano muchas gracias.
Los sistemas de pestañas basicamente tienen 2 funcionamientos, en uno todos los contenidos están definidos en la misma página, entonces lo que se hace es mostrar un contenido en tanto el otro permanece ocultos, para este tipo, y sin utilizar javascript el indicado por @IsabelM es uno de los más tradcionales.

Pero como estás hablando de "links", tu planteo genera una duda, no sé si con eso te referís a que el contenido del tab se carga de un archivo externo. Si este es el caso, entonces deberás a recurrir a Ajax, es decir, javascript. (desde ya que jQuery te simplificaría el trabajo

Sería bueno que precises tu caso

SAlu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 11/12/2012, 08:05
 
Fecha de Ingreso: junio-2011
Mensajes: 43
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Tabs o pestañas en html

Cita:
Iniciado por IsaBelM Ver Mensaje
aquí tienes uno con la pseudo-clase :checked (no es soportado por i8-). elimina el javascript no afecta al resultado
Muchas gracias a todos y a @IsaBelM creo que me funciona bien con ese ejemplo, voy a ver q puedo hacer para IE8
__________________
"Esta es mi firma"
  #7 (permalink)  
Antiguo 12/12/2012, 15:19
 
Fecha de Ingreso: junio-2011
Mensajes: 43
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Tabs o pestañas en html

Lamentablemente no me funciono
ahora creo q es un poco mas complicado, resulta que en las tab hay un image map entonces cada vez q se clickee una parte de la imagen el link debe "activar" la tab q se "clickeo" desde el image map... alguna idea de como hacerlo???? Gracias.
__________________
"Esta es mi firma"
  #8 (permalink)  
Antiguo 12/12/2012, 23:22
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 19 años, 9 meses
Puntos: 1284
Respuesta: Tabs o pestañas en html

Hola:

Las áreas en los mapas de imágenes son exactamente igual a cualquier enlace... solo tendrías que usar el mismo href que tenga la pestaña.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 13/12/2012, 08:06
 
Fecha de Ingreso: junio-2011
Mensajes: 43
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Tabs o pestañas en html

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

Las áreas en los mapas de imágenes son exactamente igual a cualquier enlace... solo tendrías que usar el mismo href que tenga la pestaña.

Saludos
Lo que pasa es que estoy usando este tipo de tabs los cuales no usan href

Código HTML:
 <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Contenido 1</label> 
__________________
"Esta es mi firma"

Etiquetas: link, pestañas, php, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:59.