Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tabs codigo
#1
Tabs para tu web codigo:


Pon entre la etiqueta <head>AQUI CODIGO</head>
Cita:<script type="text/javascript" language="javascript">
var activeTab = 1;
function openTab(tabId) {
// reset old tab and content
document.getElementById("tabLink"+activeTab).className = "tabLink";
document.getElementById("tabContent"+activeTab).className = "tabContent";
// set new tab and content
document.getElementById("tabLink"+tabId).className = "tabLinkActive";
document.getElementById("tabContent"+tabId).className = "tabContentActive";
activeTab = tabId;
}
</script>
<style>
.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: #f0f0f0;
border: 1px #dedede solid;
padding: 10px;
}
</style>

Esto va en el <body>

Cita:<div class="tabStrip">
<ul>
<li>
<a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1" name="tabLink1">Tab uno</a>
</li>

<li>
<a href="javascript:openTab(2);" class="tabLink" id="tabLink2" name="tabLink2">Tab dos</a>
</li>

<li>
<a href="javascript:openTab(3);" class="tabLink" id="tabLink3" name="tabLink3">Tab tres</a>
</li>
</ul>
</div>

<div class="tabContentActive" id="tabContent1">
aqui tu texto (1).
</div>

<div class="tabContent" id="tabContent2">
aqui tu texto (2)
</div>

<div class="tabContent" id="tabContent3">
aqui tu texto (3).
</div>
WWW
#2
Buen código, te has tomado el detalle de darle CSS y todo. Muchas gracias amigo a mas de uno les servirá.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Ayuda con este codigo Kovea 5 164 05-04-2018, 12:17 AM
Último mensaje: Kovea
  [Aporte] El Editor de codigo Atom! joselp 0 85 14-01-2018, 12:36 PM
Último mensaje: joselp
  [Aporte] Como compartir codigo en la nube con Codepen amner 1 310 14-03-2017, 03:05 PM
Último mensaje: Carlos Mendoza
  Ayuda con Código php CarlosAlberto 1 278 03-12-2016, 07:22 PM
Último mensaje: Minenage
  [Duda] Código en ASP NET C# romeho 2 434 26-07-2016, 10:40 PM
Último mensaje: romeho
  [Aporte] Codigo para renombrar tabla MySQL gassip 3 472 23-12-2015, 08:10 AM
Último mensaje: AbaddonOrmuz
  Homero Simpson dibujado con sólo código CSS Kevin9908 8 561 06-11-2015, 02:12 AM
Último mensaje: juanjj
  ¿Este código es malicioso? bseca 3 430 07-09-2015, 07:59 PM
Último mensaje: Minenage
  Codigo Imágenes que cambian automáticamente tucine 8 817 19-05-2015, 03:36 PM
Último mensaje: betiko2424
  InHabilitar Console o F12 :D + Codigo RezakeaoCrew 1 435 05-05-2015, 09:32 PM
Último mensaje: RezakeaoCrew



Usuarios navegando en este tema: 1 invitado(s)