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ágina 1</a>
<a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">Página 2</a>
<a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">Pá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