como ir a una pagina segun la pestana

el_loco90 · #1 (**permalink**) 06/12/2012, 01:30

amigos
le comento, hice un combo de 8 pestana en la misma pagina con jquery manejado con tabs, ahora lo que quiero es que cuando se haga un clic en ayuda1 vaya a ayuda1.php ->tab1 o cuando eligen ayuda2 vaya a ayuda2.php ->tab2

lo estoy haciendo de esta forma pero no anda
temasdeayuda.php#tab6

en ese ejemplo tendria que ir a temasdeayuda.php tab6 pero solo va a temasdeayuda.php y se queda en el tab1 que es el primero

alguien sabe como solucionado

gracias

emprear · #2 (**permalink**) 06/12/2012, 07:23

hay muchos sistemas de tabs con jquery (o no), tenes que pasar el código que estés usando

el_loco90 · #3 (**permalink**) 06/12/2012, 15:56

Cita:

Iniciado por emprear

hay muchos sistemas de tabs con jquery (o no), tenes que pasar el código que estés usando

yo lo tengo asi

1) usando la ultima version de jquery

2) codigo javascript

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");
$(activeTab).show();
return false;
});
});
</script>

3) codigo html

Código HTML:

Ver original<div id=cuerpo>
  <div id=centro3>
  <UL class=tabs>
  <li><a href="#tab1">1</a></li>
  <li><a href="#tab2">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>1</div>
  <div id=tab2 class=tab_content>2</div>
  <div id=tab3 class=tab_content>3</div>
  <div id=tab4 class=tab_content>4</div>
  <div id=tab5 class=tab_content>5</div>
  <div id=tab6 class=tab_content>6</div>
  <div id=tab7 class=tab_content>7</div>
  </div>
  </div>
  </div>

gracias

flashmax · #4 (**permalink**) 06/12/2012, 16:03

Hola no has encerrado los id tab con doble comilla y tambies los class corrige eso y nos cuentas
<div id=tab1 class=tab_content>1</div>

<div id="tab1" class="tab_content">1</div>

emprear · #5 (**permalink**) 06/12/2012, 16:19

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

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

emprear · #7 (**permalink**) 06/12/2012, 16:57

que es lo que "hiciste", no lo sé, pero funcionar funciona perfectamente, prestá atención a los cambios que hice en el javascript y en el html

Saludos

el_loco90 · #8 (**permalink**) 06/12/2012, 17:16

Cita:

Iniciado por emprear

que es lo que "hiciste", no lo sé, pero funcionar funciona perfectamente, prestá atención a los cambios que hice en el javascript y en el html

Saludos

en el pie yo llamo a temasdeayuda.php#tab6

y en la pagina temasdeayuda.php

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 +"#tab6"); //tab6 centro de seguridad
return false;
});
});
</script>

pzin · #9 (**permalink**) 06/12/2012, 17:20

Cita:

Iniciado por flashmax

Hola no has encerrado los id tab con doble comilla y tambies los class

Aunque supongo que no será el caso, en HTML5 no hace falta usar comillas para encerrar el valor de los atributos. Pero como no hay DOCTYPE sino el aportado por emprear vaya usted a saber lo que usa.

emprear · #10 (**permalink**) 06/12/2012, 17:30

Cita:

Iniciado por Bonez

Aunque supongo que no será el caso, en HTML5 no hace falta usar comillas para encerrar el valor de los atributos. Pero como no hay DOCTYPE sino el aportado por emprear vaya usted a saber lo que usa.

@Bonez, para darle una pista extra, te comento que la solución no pasa por el Doctype en este caso, desde ya que soy un acérrimo defensor del uso del mismo.

A decir verdad, no sé que me pongo a hablar de pistas, con que cree un archivo con el código que deje, y un pàr de archivos externos para cargar contenido, le sobra

Salu2

el_loco90 · #11 (**permalink**) 06/12/2012, 17:35

nose no anda que lastima

emprear · #12 (**permalink**) 06/12/2012, 17:54

Cita:

Iniciado por el_loco90

nose no anda que lastima

En el mismo tiempo que te tomás para postear podrías haber hecho esto

Abrís tu editor de texto
Pegás el código expuesto en http://www.forosdelweb.com/f4/como-p...8/#post4326074
Lo guardas como tabs.html
Creás otro archivo llamado ayuda1.html y le ponés de contenido <p>ayuda1</p>
Creás otro archivo llamado ayuda2.html y le ponés de contenido<p>ayuda2</p>
Todos los archivos guardados en una misma carpeta
Abris tabs.html en el navegador, le das al link 1 y luego al link 2, y terminaría sucediendo esto

http://foros.emprear.com/jquerye/tabs1/

Por supuesto que el efecto de tabs no se visualiza, supongo que el css ya lo tenías cocinado, ¿verdad?

Yo entiendo que no entiendas, por eso estoy aquí colaborando, pero tenés que poner algo de tu parte

el_loco90 · #13 (**permalink**) 06/12/2012, 18:28

Cita:

Iniciado por emprear

En el mismo tiempo que te tomás para postear podrías haber hecho esto

Abrís tu editor de texto
Pegás el código expuesto en http://www.forosdelweb.com/f4/como-p...8/#post4326074
Lo guardas como tabs.html
Creás otro archivo llamado ayuda1.html y le ponés de contenido <p>ayuda1</p>
Creás otro archivo llamado ayuda2.html y le ponés de contenido<p>ayuda2</p>
Todos los archivos guardados en una misma carpeta
Abris tabs.html en el navegador, le das al link 1 y luego al link 2, y terminaría sucediendo esto

http://foros.emprear.com/jquerye/tabs1/

Por supuesto que el efecto de tabs no se visualiza, supongo que el css ya lo tenías cocinado, ¿verdad?

Yo entiendo que no entiendas, por eso estoy aquí colaborando, pero tenés que poner algo de tu parte

claro capo, pero lo que pasa que yo no lo hice en varias paginas por ej 1.html 2.html, lo hice todo en temasdeayuda.php con divs y id

segun la opcion que elijo me muestra el contenido

emprear · #14 (**permalink**) 06/12/2012, 18:41

Cita:

Iniciado por el_loco90

claro capo, pero lo que pasa que yo no lo hice en varias paginas por ej 1.html 2.html, lo hice todo en temasdeayuda.php con divs y id

segun la opcion que elijo me muestra el contenido

Mirá, puedo contenerme

de responder lo que merecés, pero por favor no me tomes el pelo.

el_loco90 · #15 (**permalink**) 06/12/2012, 19:58

Cita:

Iniciado por emprear

Mirá, puedo contenerme

de responder lo que merecés, pero por favor no me tomes el pelo.

tambien perdoname no entendi lo que me dijiste, si queres decime lo que me merezco nose, jamas en mi vida tormare el pelo a una persona

el_loco90 · #16 (**permalink**) 07/12/2012, 00:35

Cita:

Iniciado por emprear

Mirá, puedo contenerme

de responder lo que merecés, pero por favor no me tomes el pelo.

mil disculpas emprear te estaba explicando mal mi situacion y por eso estabamos en canales diferentes

yo lo que quiero hacer es esto

tengo una pagina ayuda.php con 7 tabs y el contenido dentro de la misma, lo que quiero hacer es que cuando se haga un clic en seguridad vaya a ayuda.php tabs 3 o cuando elije datos vaya a ayuda.php tabs 3

asi es, es mi culpa porque te lo explique mal mil perdon asumo mi error
espero que me pueda ayudar y no te enojes conmigo jamas haria algo a proposito

emprear · #17 (**permalink**) 07/12/2012, 01:05

Bueno, vamos una vez más.

Vos inicialmente tenías esto (lo pongo simplificado)

Código Javascript:

Ver originalvar activeTab = $(this).find("a").attr("href");
$(activeTab).show();

y en el html vamos a trabajar como ejemplo con solo 2 links y su correspondiente contenido

Código HTML:

Ver original<div id=cuerpo>
  <div id=centro3>
  <UL class=tabs>
  <li><a href="#tab1">1</a></li>
  <li><a href="#tab2">2</a></li>
 
  </ul>
  <div class=tab_container>
  <div id=tab1 class=tab_content>1</div>
  <div id=tab2 class=tab_content>2</div>
  </div>
  </div>
  </div>

Ahora, que hace la script, identifica el elemento tomando el href del link, y simplemente lo muestra, es decir el href=#tab1 muestra el class tab_content de id tab1, y asi con el resto. pero si te fijás los contenidos ya están escritos en la propia página, 1 y 2. En ningún momento llamás archivos externos.
Después como ejemplo decis
clic en ayuda1 vaya a ayuda1.php el 2 cargue el 2 y asi el resto

Entonces aqui va mi modificación
En la script creo una variable que lee el atributo title de los links superiores

Código Javascript:

Ver originalvar contenidoTab = $(this).find("a").attr("title");

si te fijás en el html le agregué
<li><a href="#tab1" title="ayuda1">1</a></li>
<li><a href="#tab2" title="ayuda2">2</a></li>

luego tomo ese valor y lo uso para hacer el load() (que en jQuery sirve para cargar una página externa en un div de la propia página, eso es ajax)

eso lo hace esta linea

Código Javascript:

Ver original$(activeTab).load(contenidoTab +".html");

la única diffrencia es que para mi ejemplo usé archivos .html, es decir esto
contenidoTab +".html
se traducirá en ayuda1.html, ayuda2.html y asi sucesivamente construyendo ese nombre de archivo del title más la extensión, obviamente esos archivos tenes que crearlos y ponerles el contenido que corresponda

Y el ejemplo que te gejé en mi server demuestra que funciona correctamente.
Lo que pasa es que después te apareces con esto

Cita:

claro capo, pero lo que pasa que yo no lo hice en varias paginas por ej 1.html 2.html, lo hice todo en temasdeayuda.php con divs y id

y sinceramente no tiene nada que ver con lo que decís que querés al principio, y ahi viene el enojo, porque transforma en una pérdida de tiempo todo lo previo.

Esto no funciona por repetición ó copiando y pegando, tenés que tener un conocimiento mínimo de lo que hacés

Se entiende
Saludos

el_loco90 · #18 (**permalink**) 07/12/2012, 20:34

Cita:

Iniciado por emprear

Bueno, vamos una vez más.

Vos inicialmente tenías esto (lo pongo simplificado)

Código Javascript:

Ver originalvar activeTab = $(this).find("a").attr("href");
$(activeTab).show();

y en el html vamos a trabajar como ejemplo con solo 2 links y su correspondiente contenido

Código HTML:

Ver original<div id=cuerpo>
  <div id=centro3>
  <UL class=tabs>
  <li><a href="#tab1">1</a></li>
  <li><a href="#tab2">2</a></li>
 
  </ul>
  <div class=tab_container>
  <div id=tab1 class=tab_content>1</div>
  <div id=tab2 class=tab_content>2</div>
  </div>
  </div>
  </div>

Ahora, que hace la script, identifica el elemento tomando el href del link, y simplemente lo muestra, es decir el href=#tab1 muestra el class tab_content de id tab1, y asi con el resto. pero si te fijás los contenidos ya están escritos en la propia página, 1 y 2. En ningún momento llamás archivos externos.
Después como ejemplo decis
clic en ayuda1 vaya a ayuda1.php el 2 cargue el 2 y asi el resto

Entonces aqui va mi modificación
En la script creo una variable que lee el atributo title de los links superiores

Código Javascript:

Ver originalvar contenidoTab = $(this).find("a").attr("title");

si te fijás en el html le agregué
<li><a href="#tab1" title="ayuda1">1</a></li>
<li><a href="#tab2" title="ayuda2">2</a></li>

luego tomo ese valor y lo uso para hacer el load() (que en jQuery sirve para cargar una página externa en un div de la propia página, eso es ajax)

eso lo hace esta linea

Código Javascript:

Ver original$(activeTab).load(contenidoTab +".html");

la única diffrencia es que para mi ejemplo usé archivos .html, es decir esto
contenidoTab +".html
se traducirá en ayuda1.html, ayuda2.html y asi sucesivamente construyendo ese nombre de archivo del title más la extensión, obviamente esos archivos tenes que crearlos y ponerles el contenido que corresponda

Y el ejemplo que te gejé en mi server demuestra que funciona correctamente.
Lo que pasa es que después te apareces con esto

y sinceramente no tiene nada que ver con lo que decís que querés al principio, y ahi viene el enojo, porque transforma en una pérdida de tiempo todo lo previo.

Esto no funciona por repetición ó copiando y pegando, tenés que tener un conocimiento mínimo de lo que hacés

Se entiende
Saludos

es decir necesito si o si dos pagina 1 ayuda1.php y otra ayuda2.php con su respectivo contenido

no puedo hacer que llame a ayuda.php tab3, ayuda.php tab 4 y asi

emprear · #19 (**permalink**) 07/12/2012, 21:12

@el_loco90, en que quedamos, leé lo que pusiste en el primer post

Cita:

Iniciado por el_loco90

que cuando se haga un clic en ayuda1 vaya a ayuda1.php ->tab1 o cuando eligen ayuda2 vaya a ayuda2.php ->tab2

el_loco90 · #20 (**permalink**) 07/12/2012, 23:00

Cita:

Iniciado por emprear

@el_loco90, en que quedamos, leé lo que pusiste en el primer post

te pido mil disculpas te lo aclare por privado, escribi mal el primer post y por eso estabamos en diferentes canales

vamos a pasos:

1) tengo una pagina llamada temasdeayuda.php
2) en esa pagina tengo todo el contenido con div y id
3) el menu usa jquery y segun la opcion elegida me muestra el contenido por ejemplo: elijo herramientas estonces va a

Código HTML:

Ver original<li><a href="#tab3">Herramientas</a></li>

3) el contenidos de herramientas lo tengo en la misma pagina temasdeayuda.php de esta manera

Código HTML:

Ver original<div id="tab3" class="tab_content">contenido de herramientas </div>

4) lo que quiero hacer que el boton herramienta que lo tengo en el pie.php vaya a temasdeayuda.php tab3

gracias maestro por aguantame, te mande un privado

pzin · #21 (**permalink**) 08/12/2012, 02:40

Antes de postear una duda en el foro deberías de tener claro qué les lo que quieres hacer. Porque parece que vas cambiando según te venga a la mente esta u otra idea. Para mí sería un tanto desquiciante el intentar ayudar, que no me entiendas o no entiendas lo que haces para luego cambiar de opinión y querer hacer otra cosa, empezar otra vez de nuevo, pasar por el mismo proceso para luego tener otra idea brillante y volver a cambiar.

Y si no es cambiar de parecer, sino que el problema radica en la explicación, entonces explícate bien y usa un lenguaje más apropiado. Por ejemplo "botón de herramientas" puede ser "enlace en otro elemento" o "vaya a" casi que es mejor "cargar tal contenido". Porque hace para quien lee las cosas menos complicadas, más claras y al final es hasta mejor para ti.

el_loco90 · #22 (**permalink**) 08/12/2012, 19:59

el foro me permite abri otro tema explicando bien porque me confundi en el primer post y se armo un lio de confusiones

el_loco90 · #23 (**permalink**) 08/12/2012, 20:26

amigos quiero hacer exactamente esto

http://www.forosdelweb.com/f18/entra...enlace-995670/

lo que pasa que hago eso como explican y no anda