1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Plataforma Cloud</title>7 <style>8 /* Estilos previos aquí... */9 .tabs {10 display: flex;11 margin-bottom: 10px;12 }13 .tab {14 margin-right: 5px;15 padding: 5px 10px;16 background-color: #ddd;17 border: 1px solid #ccc;18 cursor: pointer;19 }20 .tab.active {21 background-color: #fff;22 border-bottom: none;23 }24 .tab-content {25 border: 1px solid #ccc;26 padding: 10px;27 }28 </style>29 <script>30 function openService(serviceName) {31 // Cerrar todas las pestañas32 var i, tabcontent, tablinks;33 tabcontent = document.getElementsByClassName("tab-content");34 for (i = 0; i < tabcontent.length; i++) {35 tabcontent[i].style.display = "none";36 }37 tablinks = document.getElementsByClassName("tab");38 for (i = 0; i < tablinks.length; i++) {39 tablinks[i].className = tablinks[i].className.replace(" active", "");40 }41 42 // Mostrar la pestaña actual y añadir clase "active"43 document.getElementById(serviceName).style.display = "block";44 evt.currentTarget.className += " active";45 }46 </script>47 </head>48 <body>49 <!-- Barra de navegación y barra lateral aquí... -->50 51 <div class="content">52 <div class="tabs">53 <div class="tab" onclick="openService('Database')">Base de Datos</div>54 <div class="tab" onclick="openService('Logs')">Logs</div>55 <div class="tab" onclick="openService('Lambdas')">Lambdas</div>56 <div class="tab" onclick="openService('Queues')">Colas</div>57 </div>58 59 <div id="Database" class="tab-content">60 <h3>Base de Datos</h3>61 <p>Contenido de Base de Datos...</p>62 </div>63 <div id="Logs" class="tab-content" style="display:none">64 <h3>Logs</h3>65 <p>Contenido de Logs...</p>66 </div>67 <div id="Lambdas" class="tab-content" style="display:none">68 <h3>Lambdas</h3>69 <p>Contenido de Lambdas...</p>70 </div>71 <div id="Queues" class="tab-content" style="display:none">72 <h3>Colas</h3>73 <p>Contenido de Colas...</p>74 </div>75 </div>76 </body>77 </html>Enlace
El enlace para compartir es: