1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Tab System</title>7 <style>8 /* Estilos para las pestañas y el contenido del panel */9 .tab {10 cursor: pointer;11 padding: 10px;12 margin-right: 5px;13 background: #ddd;14 display: inline-block;15 }16 17 .tab.active {18 background: #fff;19 border: 1px solid #ccc;20 border-bottom: none;21 }22 23 .tab-content {24 border: 1px solid #ccc;25 padding: 10px;26 display: none;27 }28 29 .tab-content.active {30 display: block;31 }32 </style>33 </head>34 <body>35 36 <div id="tabs">37 <!-- Pestañas -->38 <div class="tab" onclick="openTab(event, 'tab1')">Tab 1</div>39 <div class="tab" onclick="openTab(event, 'tab2')">Tab 2</div>40 <div class="tab" onclick="openTab(event, 'tab3')">Tab 3</div>41 42 <!-- Contenido de los paneles -->43 <div id="tab1" class="tab-content">44 <h3>Tab 1 Content</h3>45 <p>Some content for tab 1...</p>46 </div>47 <div id="tab2" class="tab-content">48 <h3>Tab 2 Content</h3>49 <p>Some content for tab 2...</p>50 </div>51 <div id="tab3" class="tab-content">52 <h3>Tab 3 Content</h3>53 <p>Some content for tab 3...</p>54 </div>55 </div>56 57 <script>58 function openTab(evt, tabName) {59 var i, tabcontent, tablinks;60 61 // Obtener todos los elementos con class="tab-content" y ocultarlos62 tabcontent = document.getElementsByClassName("tab-content");63 for (i = 0; i < tabcontent.length; i++) {64 tabcontent[i].style.display = "none";65 }66 67 // Obtener todos los elementos con class="tab" y eliminar la clase "active"68 tablinks = document.getElementsByClassName("tab");69 for (i = 0; i < tablinks.length; i++) {70 tablinks[i].className = tablinks[i].className.replace(" active", "");71 }72 73 // Mostrar el contenido actual de la pestaña y añadir una clase "active" a la pestaña que abrió el contenido74 document.getElementById(tabName).style.display = "block";75 evt.currentTarget.className += " active";76 }77 78 // Opcionalmente, abrir una pestaña por defecto79 document.getElementsByClassName("tab")[0].click();80 </script>81 82 </body>83 </html>84 Enlace
El enlace para compartir es: