Implementar (Pestañas) Tabs Styles Inspiration

Manual Web --> HTML --> Crear tabs o pestañas con jQuery --> Tab Styles Inspiration

Fecha Publicación: 13 de Junio de 2019

Fecha Modificación: 14 de Junio de 2019

Implementar (Pestañas) Tabs Styles Inspiration

Referencia:

https://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/

ejemplo de funcionamiento:

https://tympanus.net/Development/TabStylesInspiration/

Descargar fuente: Download Source

1.- Incluir los css

<link href="/include/TabStylesInspiration/css/tabs.css" rel="stylesheet"/>
<link href="/include/TabStylesInspiration/css/tabstyles.css" rel="stylesheet"/>
<link href="/include/TabStylesInspiration/css/demo.css" rel="stylesheet"/>

2.- El javascript

<script src="/include/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script> 
  (function() {

	  [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
		  new CBPFWTabs( el );
	  });

  })();
</script>

3.- Ejemplo de contenido

<!------------------------Inicio Contenido ------------------>
<div class="tabs tabs-style-linebox">
    <nav>
        <ul>        
           <li><a href="#section-linebox-1"><span>Características del Servicio</span></a></li>
           <li><a href="#section-linebox-2"><span>Caracterisiticas Programador</span></a></li>
           <li><a href="#section-linebox-3"><span>Preguntas Frecuentes</span></a></li>                     
        </ul>
    </nav>
    <div class="content-wrap">		
    	<!------------- Inicio  1er Tabs  ------------->
		 <section id="section-linebox-1">        
		  <article class="post_TabStylesInspiration" class-hover="post_TabStylesInspiration" >      
		     <div class="conteni_post">
				prueba 1	                     
			 </div>            
		  </article>
		 </section> 
		<!------------- Fin  1er Tabs  ------------->
   
   	  <!------------- Inicio  2do Tabs  ------------->
		 <section id="section-linebox-1">        
		  <article class="post_TabStylesInspiration" class-hover="post_TabStylesInspiration" >      
		     <div class="conteni_post">
				prueba 2	                     
			 </div>            
		  </article>
		 </section> 
	  <!------------- Fin  2do Tabs  ------------->
   	  
   	  <!------------- Inicio  3er Tabs  ------------->
		 <section id="section-linebox-1">        
		  <article class="post_TabStylesInspiration" class-hover="post_TabStylesInspiration" >      
		     <div class="conteni_post">
				prueba 3	                     
			 </div>            
		  </article>
		 </section> 
	  <!------------- Fin  3er Tabs  ------------->
    </div>
</div>

<!------------------------Fin Contenido ------------------>

Demostracion codigo TabStylesInspiration

Decargar codigo Fuente

Otros Tabs:

Tabs De pagos: