"TINKERMASTER " diseños para Photoshop

tinkermaster

Java Script13

[ Vista Previa ]


Contenido Caja 1
Contenido Caja 2
Contenido Caja 3


Informacion:
Nombre: Contenido de Tabs
Fecha: 13-01-2014


Calificanos:
 
[ Codigo ] 
Copia y pega [CTRL C + CTRL V] Por Encima de la Pagina o Extra Head

<!-- www.tinkermaster.es.tl -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".cont:first").show();

$(".tabs li a").click(function(){

$(".cont").hide();

$(".tabs li").not(this).removeClass("active");

$(this).parent().addClass("active");   

$($(this).attr("href")).fadeIn(250);

return false;

});});

</script> <style>

.cont{display:none;padding:8px;color:#444;}

.tabs{margin:0;padding:0;list-style: none;}

.tabs li{padding:8px;float: left;border-right:1px solid #ddd;}

.tabs li a{color:#666;text-decoration: none;}

.active{color:#000!important;background:#fefefe;font-weight:bold;}

#tabs{border-top:1px solid #ddd;clear: both;}

.contenedor{background:#f6f6f6;border:1px solid #ddd;width:100%;} /* La funcion "width" da el ancho que tendra la caja*/

</style>


Copia y pega [CTRL C + CTRL V] donde quieras que aparesca

<!-- www.tinkermaster.es.tl -->

<div class="contenedor"><ul class="tabs">

<li class="active"><a href="#tab1">Tab 1</a></li>

<li><a href="#tab2">Tab 2</a></li>

<li><a href="#tab3">Tab 3</a></li>

</ul>

<!- Editar esto ->

<div id="tabs">

<div id="tab1" class="cont">Contenido Caja 1</div>

<div id="tab2" class="cont">Contenido Caja 2</div>

<div id="tab3" class="cont">Contenido Caja 3</div>

</div></div>


Enlaces de ayuda
- Ver wallpapers para tu sitio [ Click aqui ]
- Ver diseños CSS para tu sitio [ Click aqui ]
- Ver Widgets para tu sitio [ Click aqui ]
- Ver recursos Javascript Avanzados para tu sitio [ Click aqui ]

Tags:


   
 

 
comments powered by Disqus
Hoy habia 6 visitantes (10 clics a subpáginas) ¡Aqui en esta página!

    • CUADRO TWEETS

      Para todos los usuarios de twitter que tienen una web es< esencial mantener informados a nuestros usuarios de las actualizaciones...

    • CUADRO DE NOTICIAS EN JQUERY

      crear un cuadro de noticias utilizando jquery para la animacion...

    • ESTILOS DE BORDES

      los bordes en realidad sirven para que algun elemento se vea mejor, es decir elegante...

    • RECURSOS

      encuentra exelentes paginas webs donde encontraras brushes, tipos de textos, etc...

  • SIGUEME EN YOUTUBE

    • DISEÑOS CSS

      descarga los mejores diseños Css para que puedas personalizar tu web...

    • PLANTILLAS XML

      Descarga exelentes plantillas para que personalizes tu blog...

    • JUEGOS PARA PC

      Descarga exelentes juegos para tu PC...

    • AFILIADOS VIP

      Afiliate a mi web de una manera facil y sencilla...

    • WALLPAPERS

      descarga wallpapers para que le den una mejor apariencia a tu PC...






    • Bienvenidos a Tinkermaster website en donde se comparten conocimientos, ideas e informaciones listas para que cualquiera pueda aprender de ellas - Diseñado Por Tinkermaster
      Estas viendo la imagen:


  • Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
    Registrarse gratis