Pestañas en la la web

elavdeveloper · #1 (**permalink**) 11/11/2005, 09:19

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?

JavierB · #2 (**permalink**) 11/11/2005, 09:28

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**) 11/11/2005, 09:28

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

carbalga · #4 (**permalink**) 11/11/2005, 11:23

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

caricatos · #5 (**permalink**) 11/11/2005, 12:58

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