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>Database Tab and Panel System</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">8 <style>9 body {10 font-family: Arial, sans-serif;11 margin: 0;12 padding: 0;13 display: flex;14 }15 .sidebar {16 width: 200px;17 background: #333;18 color: #fff;19 height: 100vh;20 padding: 10px;21 }22 .collection {23 cursor: pointer;24 padding: 10px;25 border-bottom: 1px solid #444;26 }27 .collection:hover {28 background: #444;29 }30 .main-content {31 flex-grow: 1;32 padding: 20px;33 background: #f0f0f0;34 }35 .tabs {36 display: flex;37 background: #fff;38 margin-bottom: 10px;39 }40 .tab {41 padding: 10px 20px;42 cursor: pointer;43 border: 1px solid #ddd;44 border-bottom: none;45 background: #eee;46 }47 .tab.active {48 background: #fff;49 border-top: 2px solid blue;50 }51 .tab-content {52 display: none;53 border: 1px solid #ddd;54 padding: 10px;55 background: #fff;56 height: calc(100vh - 60px);57 overflow: auto;58 }59 .tab-content.active {60 display: block;61 }62 </style>63 </head>64 <body>65 66 <div class="sidebar">67 <div class="collection" onclick="openCollection('collection1')">Collection 1</div>68 <div class="collection" onclick="openCollection('collection2')">Collection 2</div>69 <div class="collection" onclick="openCollection('collection3')">Collection 3</div>70 </div>71 72 <div class="main-content">73 <div class="tabs">74 <div class="tab" onclick="openTab(event, 'tab1')">Tab 1</div>75 <div class="tab" onclick="openTab(event, 'tab2')">Tab 2</div>76 <div class="tab" onclick="openTab(event, 'tab3')">Tab 3</div>77 </div>78 <div id="tab1" class="tab-content">79 <h3>Tab 1 Content</h3>80 <!-- Content -->81 </div>82 <div id="tab2" class="tab-content">83 <h3>Tab 2 Content</h3>84 <!-- Content -->85 </div>86 <div id="tab3" class="tab-content">87 <h3>Tab 3 Content</h3>88 <!-- Content -->89 </div>90 </div>91 92 <script>93 function openTab(evt, tabName) {94 var i, tabcontent, tablinks;95 tabcontent = document.getElementsByClassName("tab-content");96 for (i = 0; i < tabcontent.length; i++) {97 tabcontent[i].classList.remove("active");98 }99 tablinks = document.getElementsByClassName("tab");100 for (i = 0; i < tablinks.length; i++) {101 tablinks[i].classList.remove("active");102 }103 document.getElementById(tabName).classList.add("active");104 evt.currentTarget.classList.add("active");105 }106 107 function openCollection(collectionId) {108 // Aquí puedes añadir la lógica para cargar los datos de la colección seleccionada109 console.log("Collection selected:", collectionId);110 // Por defecto, abre la primera pestaña de la colección111 document.getElementsByClassName("tab")[0].click();112 }113 114 // Por defecto, abre la primera colección115 document.getElementsByClassName("collection")[0].click();116 </script>117 118 </body>119 </html>120 Enlace
El enlace para compartir es: