Foros del Web » Creando para Internet » HTML »

Pestañas en la la web

Estas en el tema de Pestañas en la la web en el foro de HTML en Foros del Web. Hola amigos: Tengo una duda, la cual espero, me ayuden a resolver. Todo el que haya entrado a http://www.macromedia.com/es/software/studio debe de haber visto como la ...
  #1 (permalink)  
Antiguo 11/11/2005, 09:19
Avatar de elavdeveloper  
Fecha de Ingreso: noviembre-2005
Ubicación: IPICHCB - Data Center
Mensajes: 52
Antigüedad: 12 años
Puntos: 0
Pestañas en la la web

Hola amigos:
Tengo una duda, la cual espero, me ayuden a resolver. Todo el que haya entrado a http://www.macromedia.com/es/software/studio debe de haber visto como la página tiene unas pestañas que al dar clic sobre ellas, no te cambian la página, sino que, te muestra otra información en la misma página. ¿Me hago entender? ¿Cómo puedo hacerlo?
__________________
elavdeveloper
  #2 (permalink)  
Antiguo 11/11/2005, 09:28
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola elavdeveloper

Aquí tienes una página sobre el tema de las solapas o pestañas:

http://kusor.net/traducciones/brainjar.es/tabs1.es.html

Saludos,
  #3 (permalink)  
Antiguo 11/11/2005, 09:28
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
Si que cambia la página, sino, fíjate en la barra de direcciones de tu web. Es fácil de hacer, haces dos páginas iguales pero cambiando la posición de la pestaña y el cotenido.

Para hacerla como tu dices, sin recaragar la página, tendrías que usar Ajax. Te recomiendo que te des una vueltecita por el foro de ajax.

Un saludo y suerte
  #4 (permalink)  
Antiguo 11/11/2005, 11:23
Avatar de carbalga  
Fecha de Ingreso: octubre-2005
Ubicación: Coronado, Costa Rica
Mensajes: 138
Antigüedad: 12 años, 1 mes
Puntos: 1
Saludos elavdeveloper:

Con DREAMWEAVER puedes utilizar los <div> hacer unos TABS de prueba es muy sencillo sin necesidad de cargar paginas.

Ademas usa el BEHAVIOR (Comportamiento) SHOW HIDE LAYERS (Mostrar Ocultar Capas)

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:0px;
	top:50px;
	width:450px;
	height:250px;
	z-index:1;
	background-color: #FFFF99;
	visibility: visible;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#Layer2 {
	position:absolute;
	left:0px;
	top:50px;
	width:450px;
	height:250px;
	z-index:2;
	background-color: #FFCC66;
	visibility: hidden;
}
#Layer3 {
	position:absolute;
	left:0px;
	top:50px;
	width:450px;
	height:250px;
	z-index:3;
	background-color: #00FF99;
	visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<table width="450" height="50" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" align="center" bgcolor="#FFFF99"><a href="javascript:;" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide')">TAB# 1 </a></td>
    <td width="150" align="center" bgcolor="#FFCC66"><p><a href="javascript:;" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide')">TAB# 2</a></p>
    </td>
    <td width="150" align="center" bgcolor="#00FF99"><a href="javascript:;" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show')">TAB# 3 </a></td>
  </tr>
</table>
</body>
</html> 
Copia el anterior contenido en un HTML y PRUEBALO
__________________
SBC Studio
www.sbcstudio.com
| Aplicaciones Web - Costa Rica |
[email protected]
  #5 (permalink)  
Antiguo 11/11/2005, 12:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

La cuestión es poner capas ocultas y simular las pestañas con estilos.

Otra página completita: http://www.caricatos.net/sistemaPestanas/index.html

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 22:16.