Staff en línea

[html] Tablilla con JS para tablón de anuncios
Tema iniciado por y Añadir a favoritos

staff
[codebox]Esta pequeña tablilla se puede usar independiente o como parte de un tablón de anuncios más extenso. Demo [[/codebox]

[hidecode]
Código:
HTML
<div class="cordepn-container">
<div id="icetab-container">
       <div class="icetab current-tab">Tab1</div><div class="icetab">Tab2</div><div class="icetab">Tab3</div>     
    </div>
   
    <div id="icetab-content">
       <div class="tabcontent tab-active">Tab1 <br>1 lorim ipsum</div>
        <div class="tabcontent">Tab2 <br>2 lorim ipsum</div>
        <div class="tabcontent">Tab3 <br>23 lorim ipsum</div>
    </div>

JS

div {
   box-sizing: border-box;
   transition: all ease-in-out .5s;
   -moz-transition: all ease-in-out .5s;
   -webkit-transition: all ease-in-out .5s;
}
.icetab {
   border: 2px solid #d4255e;
   display: inline-block;
   border-bottom: 0px;   
   margin: 0px;   
  color: #fff;
   cursor: pointer;
   border-right: 0px;
}
.icetab:last-child {
   border-right: 2px solid #d4255e;   
}

#icetab-content {
   overflow: hidden;
   position: relative;
   border-top: 2px solid #d4255e;
}


.tabcontent {
   position: absolute;
   left: 0px;
   top: 0px;
   background: #fff;
   width: 100%;
   border-top: 0px;
   border: 2px solid #d4255e;
   border-top: 0px;
   transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -webkit-transform: translateY(-100%);
}

.tabcontent:first-child {
   position: relative;   
}
.tabcontent.tab-active {
   border-top: 0px;
   display: block;
   transform: translateY(0%);
   -moz-transform: translateY(0%);
   -webkit-transform: translateY(0%);
}


/* A tiny wee bit of visual formating */

.cordepn-container {
  max-width: 300px;
  margin: 40px;

}

.tabcontent {
   padding: 40px;
}
.icetab {
   padding: 20px;
   text-transform: uppercase;
   letter-spacing: 2px;
}
.current-tab {
   background: #d4255e;
}

Javascript
var tabs = document.getElementById('icetab-container').children;
var tabcontents = document.getElementById('icetab-content').children;

var myFunction = function() {
   var tabchange = this.mynum;
   for(var int=0;int<tabcontents.length;int++){
      tabcontents[int].className = ' tabcontent';
      tabs[int].className = ' icetab';
   }
   tabcontents[tabchange].classList.add('tab-active');
   this.classList.add('current-tab');
}   


for(var index=0;index<tabs.length;index++){
   tabs[index].mynum=index;
   tabs[index].addEventListener('click', myFunction, false);
}
[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.