Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he probado a hacer mil cambios, pero nada. ¿Dónde puede estar el fallo?
El contenido me aparece de una vez en la pantalla. Y no según pulso cada pestaña.
Si a simple vista vieses algún error o tuvieses un código similar, te lo agradecería.
También lo probé con librería propia incluida, en vez de enlazar a Google, pero nada.
Por cierto el codigo es largo, pero la mayor parte son estilos que si van bien, el fallo evidentemente tiene que estar en el script.
Si te resulta engorroso, descarta la pregunta sin problemas.
Un saludo
Mónica
El código es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html.
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px;
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff;
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
 background: #fff;
 border-bottom: 1px solid #fff;
}
.tab_container {
 border: 1px solid #999;
 border-top: none;
 overflow: hidden;
 clear: both;
 float: left; width: 100%;
 background: #fff;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}
</style>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function()
{
 $(".tab_content").hide();
 $("ul.tabs li:first").addClass("active").show();
 $(".tab_content:first").show();
 $("ul.tabs li").click(function()
       {
  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");
  $(".tab_content").hide();
  var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn();
  return false;
 });
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
       Hola
    </div>
    <div id="tab2" class="tab_content">
       Adios
</div>
</div>
</body>
</html>

2 respuestas

Respuesta
1
Tu script funciona, solo que recuerda poner tu librería Jquery antes del script.
Otra cosa, en estos casos es muy útil usar algún tipo de depurador de código como developer tools de chrome o safari. O Firebug de Firefox.
Si hubieras usado alguna de estas consolas hubieras visto el típico error $ is not defined, o dicho en castellano: tu objeto jQuery no estaba definido porque la librería estaba definida después de script.
Saludos, espero te haya servido y califica y cierra la pregunta si fue útil.
Flor
Respuesta
1
Estuve revisando tu codigo y lo he mejorado un poco ... pruebalo y cualkier duda me la haces llegar ok!
Codigo: ...
<!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>Ejemplo de Tabs</title>
<style type="text/css">
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Tab1</h2>
<p>Contenido del Tab 1.</p>
</div>
<div id="tab2" class="tab_content">
<h2>Tab 2</h2>
<p>Contenido del Tab 2.</p>
</div>
<div id="tab3" class="tab_content">
<h2>Tab 3</h2>
<p>Contenido del Tab 3.</p>
</div>
</div>
</div>
</body>
</html>
Att. Carlos J Medina. (Trujillo)

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Grabar desconexión de usuario logueado

Tengo una web en la que los usuarios pueden loguearse, y al hacerlo se graba en una base de datos mysql el usuario y la hora de conexión. Quisiera saber cómo hacer para que también quede grabada la hora de "desconexión". Si pulsan el botón de cerrar...
2 respuestas

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas

Como Redireccionar a url leída en un campo de mysql

Agradecería vuestra ayuda porque me he quedado para en este punto. Tengo una base de datos con los campos usuario, password y url ( cada usuario tiene su propia url) Tengo una web con un formulario de acceso y al validar los datos (usuario, password)...
1 respuesta

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Galeria de imagenes html con marquee

Soy nuevo en la creación de páginas web, y estoy haciendo una personal. Mi problema surge cuando quiero crear una galería de imágenes, para la que estoy utilizando marquee. Para mostrar las imágenes en menor tamaño y al hacer click que se vean más...
1 respuesta

Sobre el diseño del encabezado

Miquelcala. Me podrías ayudar sobre el código del diseño del encabezado en css3, es decir el logotipo de mi página me gustaría que estuviera a la izquierda y el menú que estuviera debajo del logotipo, el cual en este momento se encuentra a la...
1 respuesta

Como mostrar solo 2 decimales en este código PHP

Tengo este código php en el cual cuando introduzco un numero en el campo precio se muestra un porcentaje de ese numero en el campo monto y monto2 El problema es que para algunos numero el resultado de esta operación muestra el numero en los campos...
1 respuesta

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta

Sobre el Footer

Soy Manuel, he realizado mi página web en photoshop, html5 y por último en css3, pero en ésta última parte no logro colocar los iconos de la redes sociales, sólo me aparece un hueco como si estuviera puesto, aunque en realidad no hay nada, lo he...
1 respuesta