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
Guiño ¿Cómo escanear un código QR? WMasterT 3 44 09-12-2018, 12:21 AM
Último mensaje: alieninc
Música Código para crear el archivo en PHP que crea la imagen de verificación WMasterT 2 27 04-12-2018, 10:44 AM
Último mensaje: easy english
Sonrisa Código completo con formulario para crear códigos QR WMasterT 2 23 04-12-2018, 08:53 AM
Último mensaje: easy english
  [Duda] Ayuda con este codigo Kovea 5 322 05-04-2018, 12:17 AM
Último mensaje: Kovea
  [Aporte] El Editor de codigo Atom! joselp 0 174 14-01-2018, 12:36 PM
Último mensaje: joselp
  [Aporte] Como compartir codigo en la nube con Codepen amner 1 415 14-03-2017, 03:05 PM
Último mensaje: Carlos Mendoza
  Ayuda con Código php CarlosAlberto 1 359 03-12-2016, 07:22 PM
Último mensaje: Minenage
  [Duda] Código en ASP NET C# romeho 2 543 26-07-2016, 10:40 PM
Último mensaje: romeho
  [Aporte] Codigo para renombrar tabla MySQL gassip 3 600 23-12-2015, 08:10 AM
Último mensaje: AbaddonOrmuz
  Homero Simpson dibujado con sólo código CSS Kevin9908 8 664 06-11-2015, 02:12 AM
Último mensaje: juanjj



Usuarios navegando en este tema: 1 invitado(s)