Tabooktron.es: Tabs para tu pagina web (menu)

miércoles, 17 de junio de 2015

Tabs para tu pagina web (menu)

Hola les dejo este código muy popular como son los tabs conten

DESPUES DE AGREGAR LOS CODIGOS REFRESCA O ACTULAIZA TÚ PAGINA WEB.

Agregas los códigos así:

aqui tu texto (1).

aqui tu texto (2)

aqui tu texto (3).

Este seria un pequeño ejemplo de lo que podríamos hacer con este tabs en mi caso lo utilizo para la selección de video y también de entras ademas de mas utilidades que le puedas dar tu mismo.

ejemplo Selección de texto en JavaScript

Copia y pega esto en el Head

<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><br />
<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>

ejemplo Selección de texto en JavaScript

No hay comentarios:

Publicar un comentario

Hola Bienvenido soy Theroyalg4me Me serviría mucho que comentaras que tal te ha parecido la entrada que acabas de ver, No olvides seguirme en mis redes sociales

Suscribirse a: Enviar comentarios (Atom)