Ver Mensaje Individual
  #3 (permalink)  
Antiguo 17/10/2008, 10:51
Avatar de gisek
gisek
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: problema para mostar contenido de etiquetas <DIV>

Antes que nada gracias por contestar nuevamente GatorV.

No sé como explicarme. Pero Mira te cuento todo de nuevo, me es más fácil. (Perdón ).

Estoy armando un sistema llamado archivo digital, en el se almacenaran datos de nuestros clientes y su documentación correspondiente, esta documentación se digitaliza y se divide en 5 diferentes pdf´s; todos estos datos y archivos se almacenan en una base de datos (MySQL) para posteriormente consultarlos, el caso es que tengo un ventana en donde listo todos los clientes almacenados (muestra los datos más relevantes) y también tengo un apartado en donde los pueden buscar, todas estas consultas previamente paginadas y ordenadas, entonces uno de esos campos en el listado es un link que me lleva a un PopUp (tipo ajax) en donde muestro los datos completos, y en una sección de ese mismo popup, tengo la estructura que mostré antes que simula un menú de pestañas (aquí es donde esta mi problema) pues en estas pestañas lo que necesito es que al dar click sobre cada una de las 5 pestañas muestre su pdf asignado y así muestre los datos del cliente consultado.

El problema es que no tengo idea de cómo mostrar y cambiar el contenido en el <div> “contenido” dependiendo (“del <div>”) de la pestaña que hayan clickeado en el menú.

Lo que estoy intentando hacer, es modificar un script que encontré, pero no funciona de la forma en la que necesito, porque este script abre una pagina dependiendo de la pestaña elegida. Y lo que yo quiero es algo como ocultar el contenido de las 5 pestañas ya con su pdf previamente asignado y solo mostrar la pestaña elegida ó la visitada mejor dicho y así visualizar el pdf correspondiente en su pestaña.


Mira tengo Algo así como esto.
Código HTML:
<div id="container">
   <div class="tabs" id="tab1">PDF 1</div> //pestaña 1
   <div class="tabs" id="tab2">PDF 2</div> //pestaña 2
   <div class="tabs" id="tab3">PDF 3</div> //pestaña 3
   <div class="tabs" id="tab4">PDF 4</div> //pestaña 4
   <div class="tabs" id="tab5">PDF 5</div> //pestaña 5
   <div id="content"> //div que alojara el contenido de la pestaña seleccionada
   <?php // consulta del cliente seleccionado en la ventana anterior
    //$id lo cacha de la consulta en la ventana anterior
    require ('../admin/dbconexion.php');
    $sql="SELECT clientes.id_adg,
		   clientes.id_cliente,
		   clientes.nombre,
		   contribuyentes.contribuyente,
		   documentos.tipo
	FROM clientes
	inner join contribuyentes
	on clientes.id_contribuyente = contribuyentes.id_contribuyente
	inner join documentos
	on clientes.id_adg = documentos.id_adg  WHERE clientes.id_adg=$id";
            $res=mysql_query($sql);  
            while($registro=mysql_fetch_array($res))
            {
               $num = $registro[id_adg];
               $contrato = $registro[id_cliente];
               $cliente = $registro[nombre];
               $persona =  $registro[contribuyente];
            }
            echo "<div align='center'>
               <object 
                   classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' 
                   codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112' 
                   type='application/pdf'>
               <embed src='../php/getfile.php?id=".$num."#zoom=50%&page=1' width='494' height='499'>
               </embed></object></div>";
// El archivo getfile.php solo recibe id del archivo seleccionado y muestra ó imprime el contenido del pdf en el div “content”
?>
   /div>
</div
Ejemplo que estoy siguiendo.
estoy intentando modificarlo pero nada.

script.js
Código HTML:
//Desarrollado por Jesús Liñán
//[email protected]
//ribosomatic.com
//Puedes hacer lo que quieras con el código
//pero visita la web cuando te acuerdes

//crear objeto ajax
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
//hasta aquí no hay problema

//en esta parte no sé como pasarle los parámetros para solo mostrar el <DIV> elegido.
//Ya que también recibe la pagina a mostrar
function MostrarPagina(pagina,boton){
	cont = document.getElementById('contenido');
	
	ajax=objetoAjax();
	
    ajax.open("GET", pagina); 
    ajax.onreadystatechange = function(){
		if (ajax.readyState == 4 && ajax.status == 200) {
			cont.innerHTML = ajax.responseText;
		}
	}
	ajax.send(null);
	//----------- configuraciones previas -------------//
	
	//definir los titulos de los botones
	titulo=new Array();
	titulo[0]="CSS";
	titulo[1]="HTML";
	titulo[2]="PHP";
	
	//definir numero de botones
	nrobtn=3;
	
	//definir prefijo de botones
	//(esto con el objetivo de no tener
	//problemas al momento de validar
	//nuestra página.)
	pref="boton_";
	
	//-------------------- fin ------------------------//

	//quita el estilo a todos los botones
	for(i=1;i<=nrobtn;i++){
		tit=titulo[i-1];
		btn=document.getElementById(pref+i);
		btn.innerHTML="<span style=\"border-top:1px #FF9900 solid; border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	border-bottom:1px #FF9900 solid; margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:1px; text-decoration:none; 	background-color:#FFFFCC;\">"+tit+"</span>";
	}
	//le da estilo al boton actual
	btnA = document.getElementById(pref+boton);
	tit=titulo[boton-1];
	btnA.innerHTML="<span style=\"border-top:1px #FF9900 solid;	border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:5px; text-decoration:none; 	background-color:#FFCCCC;\">"+tit+"</span>";
}
estilos.css
Código HTML:
body {
	margin: 0px 0px 0px 0px;
}
#container {
	margin-top:15px;
	margin-left:15px;
	width:669px;
}
.tabs {
	margin-right:10px;
	width:50px;
	border:3px double #C5C9BF;
	border-bottom:0;
	padding:4px;
	float:left;
	cursor:pointer;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#9FA594;
	font-weight:bold;
	font-variant:small-caps;
}
#content {
	border:4px double #A0A595;
	height:640px;
	clear:both;
}
tabs.html
Código HTML:
<html><head>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body onload="MostrarPagina()">
<div id="botones">
<a id="boton_1" onclick="MostrarPagina('pagina1.html','1')">P&aacute;gina 1</a> 
<a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">P&aacute;gina 2</a> 
<a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">P&aacute;gina 3</a> 
</div>
<div id="contenido"> </div>
</body></html> 
Perdon si te molesto que te haya puesto tanto texto pero así me es más facil explicarme, ojala puedas ayudarme. SALUDOS