Muy buenas.
buscando por internet encontre una caja con pestañas en la que meto información y puedes navegar de una pestaña a otra.
la verdad que funciona bien y no fue muy dificil el hacer que funcionara bien, bueno más o menos bien.
El problema que no consegui solucionar es que cuando pongo varias ventanas la primera sale bien ( con sus dimensiones ,etc), pero la siguiente sale completamente desplegada (cosa que no consigo entender ya que si clico nuevamente sobre ella toma de nuevo las dimensiones correctas).
haber si alguien me puede echar un cable con una pequeña explicación.
este es el script:
<script>
function tabSwitch_2(active, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.di splay = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).sty le.display = 'block';
document.getElementById(tab_prefix+active).classNa me = 'active';
}
</script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // Script del Navegador
$("ul.subnavegador").not('.selected').hide();
$("a.desplegable").click(function(e){
var desplegable = $(this).parent().find("ul.subnavegador");
$('.desplegable').parent().find("ul.subnavegador") .not(desplegable).slideUp('slow');
desplegable.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all elements with the class 'content' up
$(".content").slideUp();
// Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
El html:
<div id="tabbed_box_1" class="tabbed_box">
<!-- <h4>Browse Site <small>Select a Tab</small></h4>-->
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Piloto</a></li>
<li><a href="#" title="content_2" class="tab">Equipo</a></li>
<li><a href="#" title="content_3" class="tab">Coche</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a href="">Nombre: <small>Fernando Alonso</small></a></li>
<li><a href="">Temporadas:<small>10</small></a></li>
<li><a href="">Mejor Puesto:<small>1º</small></a></li>
<li><a href="">Campeonatos del mundo:<small>2</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">Equipo: <small>Ferrari</small></a></li>
<li><a href="">Nombre Coche: <small>F-665</small></a></li>
<li><a href="">Escuderia:<small>Marquicoci - Team</small></a></li>
<li><a href="mailto:
[email protected]">Contacto: <small>
[email protected]</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Datos tecnicos: <small>Ferrari</small></a></li>
<li><a href="">Motor: <small>Ferrari</small></a></li>
<li><a href="">Cilindrada: <small>1000 c.c</small></a></li>
<li><a href="">Chasis: <small>Ferrari</small></a></li>
</ul>
<img src="img/coches/red-bull-rb7.png" alt="coche redbull" id="coche" />
</div>
</div>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_4" class="tab active">Piloto</a></li>
<li><a href="#" title="content_5" class="tab">Equipo</a></li>
<li><a href="#" title="content_6" class="tab">Coche</a></li>
</ul>
<div id="content_4" class="content">
<ul>
<li><a href="">Nombre: <small>Fernando Alonso</small></a></li>
<li><a href="">Temporadas:<small>10</small></a></li>
<li><a href="">Mejor Puesto:<small>1º</small></a></li>
<li><a href="">Campeonatos del mundo:<small>2</small></a></li>
</ul>
</div>
<div id="content_5" class="content">
<ul>
<li><a href="">Equipo: <small>Ferrari</small></a></li>
<li><a href="">Nombre Coche: <small>F-665</small></a></li>
<li><a href="">Escuderia:<small>Marquicoci - Team</small></a></li>
<li><a href="mailto:
[email protected]">Contacto: <small>
[email protected]</small></a></li>
</ul>
</div>
<div id="content_6" class="content">
<ul>
<li><a href="">Datos tecnicos: <small>Ferrari</small></a></li>
<li><a href="">Motor: <small>Ferrari</small></a></li>
<li><a href="">Cilindrada: <small>1000 c.c</small></a></li>
<li><a href="">Chasis: <small>Ferrari</small></a></li>
</ul>
<img src="img/coches/red-bull-rb7.png" alt="coche redbull" id="coche" />
</div>
</div>
y el css:
body {/*==background:url(img/ficha/fondo.jpg) no-repeat ; background-position:center center ;==*/ background-color:#000 ; margin:40px ;}
#tabbed_box_1 {margin: 0px auto 0px auto; width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#ffffff; letter-spacing:-1px; margin-bottom:10px; }
.tabbed_box h4 small { color:#e3e9ec;font-weight:normal;font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area { border:1px solid #494e52; background-color:#636d76;padding:8px;}
ul.tabs { margin:0px; padding:0px;}
ul.tabs li {list-style:none; display:inline; }
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.tabs li a:hover {background-color:#2f343a; border-color:#2f343a; }
ul.tabs li a.active { background-color:#ffffff;color:#282e32;border:1px solid #464c54; border-bottom: 1px solid #ffffff; }
.content { background-color:#ffffff; padding:10px; border:1px solid #464c54; }
#content_2, #content_3 { display:none; }
ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
.content ul { margin:0px;padding:0px 20px 0px 20px;}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {text-decoration:none; color:#3e4346; }
.content ul li a small { font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative;left:4px; top:0px; }
.content ul li:last-child {
border-bottom:none;
}
#coche{ margin-left:45px;}
espero que me podais ayudar.
un saludo