Foros del Web - Ver Mensaje Individual

el_loco90 · #6 (**permalink**) 06/12/2012, 16:51

Cita:

Iniciado por emprear

tu sistema de tabs está diseñado no para cargar contenido externo, sino para definir el contenido en la misma página

Podés utilizar load() de jQuery y valerte del atributo title para identificar el nombre de la página que querés cargar, mirá las lineas 23 y 25

ejemplo

Código HTML:

Ver original<!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>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
$(".tab_content").hide();
$("ul.tabs li:eq(0)").addClass("active").show();
$(".tab_content:eq(0)").show();
$("ul.tabs li").click(function()
{
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
var contenidoTab = $(this).find("a").attr("title");
$(activeTab).show();
$(activeTab).load(contenidoTab +".html");
return false;
});
});
//]]>
</script>
</head>
<body>
<div id="cuerpo">
<div id="centro3">
<ul class="tabs">
<li><a href="#tab1" title="ayuda1">1</a></li>
<li><a href="#tab2" title="ayuda2">2</a></li>
<li><a href="#tab3">3</a></li>
<li><a href="#tab4">4</a></li>
<li><a href="#tab5">5</a></li>
<li><a href="#tab6">6</a></li>
<li><a href="#tab7">7</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content"><!-- contenido --></div>
<div id="tab2" class="tab_content"><!-- contenido --></div>
<div id="tab3" class="tab_content"><!-- contenido --></div>
<div id="tab4" class="tab_content"><!-- contenido --></div>
<div id="tab5" class="tab_content"><!-- contenido --></div>
<div id="tab6" class="tab_content"><!-- contenido --></div>
<div id="tab7" class="tab_content"><!-- contenido --></div>
</div>
</div>
</div>
</body>
</html>

Saludos

hice las dos cosas que me dijeron y no funciona por ejemplo

el javascript quedo asi

Código Javascript:

Ver original<script type=text/javascript> 
$(document).ready(function()
{
$(".tab_content").hide();
$("ul.tabs li:eq(0)").addClass("active").show();
$(".tab_content:eq(0)").show();
$("ul.tabs li").click(function()
{
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
var contenidoTab = $(this).find("a").attr("title");
$(activeTab).show();
$(activeTab).load(contenidoTab +"centrodeseguridad.php");
return false;
});
});
</script>

y despues puse las comillas

el boton centro de seguridad lo tengo en el pie de la pagina y quiero que cuando se haga un clic en centro de seguridad que vaya a temasdeayuda.php ->tab6