Buenas tardes/noches:
Quería comentar un problema que soy absolutamente incapaz de resolver. Estoy intentando hacer unos tabs con jQuery UI y me es imposible. No he podido simplificar más la prueba y aún así no hay manera, se me queda siempre en la etiqueta principal.
Tengo las versiones: jQuery (1.3.2) y jQuery UI (1.7), ambas completas.
Copio los códigos y a ver si alguien me puede echar una mano.
Muchas gracias.
Página Código HTML:
<!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>Documento sin ttulo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="js.js"></script>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Pruebas Tabs</h1>
<div id="tabbed_box" class="tabbed_box">
<div id="tabs">
<ul>
<li><a href="#tab_1" title="probando01" class="tab active">Probando 01</a></li>
<li><a href="#tab_2" title="probando02" class="tab">Probando 02</a></li>
</ul>
<div id="tab_1" class="content">
probando01
</div>
<div id="tab_2" class="content">
probando02
</div>
</div>
</div>
</body>
</html> CSS
Código:
@charset "utf-8"
html {
margin: 0px;
padding: 0px;
}
body {
background: #ccc url('img/back.jpg') repeat-x;
text-align: center;
margin: 0px;
padding: 0px;
font-family: helvetica,verdana, arial;
font-size: 10pt;
font-weight: 100;
color: #333;
}
p {
margin-top: 20px;
}
dl {
font-size: 11pt;
font-weight: bold;
font-style: italic;
border: 1px solid #555;
padding: 5px;
}
dt {
font-size: 10pt;
font-style: normal;
font-weight: bold;
padding: .3em;
padding-left: 15px;
margin-bottom: 2px;
background: #ccc;
}
dd {
font-size: 10pt;
font-style: italic;
font-weight: normal;
padding-bottom: .2em;
}
a {
text-decoration: none;
font-weight: bold;
color: #0000FF;
}
a:hover {
color: #ff6633;
}
label {
display: block;
margin: .5em 0 0 0;
}
legend {
font-family: "Courier New";
font-size: .8em;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
border: 1px #555 solid;
background: #ccc;
color: #555;
}
fieldset {
border: 1px solid #555;
margin: auto;
margin-bottom: 10px;
padding: 10px;
width: 450px;
clear: both;
}
/* Menú Tab */
#tabbed_box {
margin: auto;
width: 300px;
}
#tabs ul {
margin: 0px;
padding: 0px;
margin-top: 5px;
margin-bottom: 6px;
}
#tabs ul li {
list-style: none;
display: inline;
}
#tabs ul li a {
background-color: #464c54;
color: #ccc;
padding: 8px 14px 8px 14px;
text-decoration: none;
font-size: 9px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-transform: uppercase;
border: 1px solid #aaa;
}
#tabs ul li a:hover {
background-color: #2f343a;
border-color: #aaa;;
}
#tabs ul li a.active {
background-color: #ddd;
color: #333;
border: 1px solid #aaa;
border-bottom: solid 1px #ddd;
}
.content {
background-color: #ddd;
padding: 10px;
border: 1px solid #aaa;
}
.content ul li:last-child {
border-bottom: none;
}
.ui-tabs .ui-tabs-hide {
display: none;
}
#tab_2 {
display: none;
}
Código:
// Javascript
$(document).ready(function() {
$('#tabs > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});