Tabs que no quieren funcionar Tengo este código, que, si no me equivoco, se debe de situar en el Head de mi página web.
<style type="text/css">
/*<![CDATA[*/
.tabStrip ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabStrip li {
margin: 0 2px 0 0;
list-style-type: none;
float: left;
}
.tabLink {
display: block;
text-decoration: none;
padding: 5px;
background: #e8e8e8;
border: #dadada solid;
border-width: 1px 1px 0 1px;
color: #8a8a8a;
}
.tabLinkActive {
display: block;
text-decoration: none;
padding: 5px;
background: #e0e0e0;
border: #c0c0c0 solid;
border-width: 1px 1px 0 1px;
color: #0066ff;
}
.tabContent {
display: none;
}
.tabContentActive {
display: block;
clear: both;
background: #0099ff;
border: 1px #dedede solid;
padding: 10px;
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#jimdobox {
position: absolute;
Right: 2000px;
}
/*]]>*/
</style>
Y este otro código, que es el que coloco en el cuerpo de la página:
<div class="tabStrip">
<ul>
<li>
<a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1" name="tabLink1">pestaña 1</a>
</li>
<li>
<a href="javascript:openTab(2);" class="tabLink" id="tabLink2" name="tabLink2">pestaña 2</a>
</li>
<li>
<a href="javascript:openTab(3);" class="tabLink" id="tabLink3" name="tabLink3">pestaña 3</a>
</li>
</ul>
</div>
<div class="tabContentActive" id="tabContent1">
lorem
</div>
<div class="tabContent" id="tabContent2">
lorem ipsum
</div>
<div class="tabContent" id="tabContent3">
lorem ipsum elefante
</div>
Hasta ahí, creo que todo bien. Las tabs se ven correctamente y muestran lo que yo quiero. El problema está en que no cambian de pestaña al hacer click, por lo que, gracias a mi experta mente, deduzco que el problema es del 2º código ¿Alguien me podría ayudar a solucionarlo?
PD: Siento si el problema es muy simple, pero es que soy aún muy novato en esto, intentaré aprender de mis errores.
Gracias de antemano
