Crear tabs (solapas, pestañas…) con JQuery y HTML de forma sencilla

Vamos a crear en este caso práctico Tabs, con otras palabras se le puede llamar Solapas, Pestañas o incluso Menú.

Utilizaremos la función de JQuery llamada tabs().

Antes de nada la demo de nuestro ejemplo esta en el siguiente enlace:

VER EJEMPLO

La implementación es muy sencilla y rápida:

  • Cargar los estilos CSS de JQuery
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  • Cargar las librerías de JQuery
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  • Introducimos un script que lance la función de JQuery  Tabs()
<script>
  $( function() {
    $( "#grupoTablas" ).tabs();
    } );
</script>
  • Creamos cabeceras de nuestras pestañas
<ul>
  <li><a href="#tab-1">Solapa 1</a></li>
  <li><a href="#tab-2">Solapa 2</a></li>
  <li><a href="#tab-3">Solapa 3</a></li>
</ul>
  • Definimos el contenido, cada sección dentro de su correspondiente pestaña
<div id="tab-1">
  <p>Contenido 1.</p>
</div>
<div id="tab-2">
  <p>Contenido 2.</p>
</div>
<div id="tab-3">
  <p>Contenido 3.</p>
</div>

Y ya está, así de simple, el código completo es:

<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solapas con JQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#grupoTablas" ).tabs();
  } );
</script>
</head>
<body>
 
<div id="grupoTablas">
  <ul>
    <li><a href="#tab-1">Solapa 1</a></li>
    <li><a href="#tab-2">Solapa 2</a></li>
    <li><a href="#tab-3">Solapa 3</a></li>
  </ul>
  <div id="tab-1">
    <p>Contenido 1.</p>
  </div>
  <div id="tab-2">
    <p>Contenido 2.</p>
  </div>
  <div id="tab-3">
    <p>Contenido 3.</p>
  </div>
</div>
 
</body>
</html>

Si necesitáis más información de la función tabs() podéis consultarla desde el siguiente enlace: Tabs Widget

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

2 comentarios sobre “Crear tabs (solapas, pestañas…) con JQuery y HTML de forma sencilla

  • el Ene 15, 2018 a las 10:00 pm
    Permalink

    Muchas gracias, funciono excelente !

    Respuesta
  • el Jun 15, 2018 a las 2:32 am
    Permalink

    Fácil y práctico, muchas gracias.

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.