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 and Panel System</title>7 <style>8 * {9 box-sizing: border-box;10 }11 body {12 font-family: Arial, sans-serif;13 }14 .sidebar {15 float: left;16 width: 20%;17 background: #f1f1f1;18 padding: 20px;19 }20 .main-content {21 float: left;22 width: 80%;23 padding: 20px;24 }25 .tab {26 display: block;27 background: #eee;28 padding: 10px;29 border-top: 1px solid #ddd;30 text-decoration: none;31 color: black;32 }33 .tab:hover {34 background: #ddd;35 }36 .tab-content {37 display: none;38 padding: 20px;39 border: 1px solid #ddd;40 height: 300px; /* Adjust as per content */41 overflow: auto;42 }43 .tab-content.active {44 display: block;45 }46 </style>47 </head>48 <body>49 50 <div class="sidebar">51 <!-- Sidebar will contain tabs -->52 <a href="#" class="tab" onclick="openTab(event, 'collection1')">Collection 1</a>53 <a href="#" class="tab" onclick="openTab(event, 'collection2')">Collection 2</a>54 <a href="#" class="tab" onclick="openTab(event, 'collection3')">Collection 3</a>55 </div>56 57 <div class="main-content">58 <!-- Main content will contain tab contents -->59 <div id="collection1" class="tab-content">60 <h3>Collection 1</h3>61 <!-- Content -->62 </div>63 <div id="collection2" class="tab-content">64 <h3>Collection 2</h3>65 <!-- Content -->66 </div>67 <div id="collection3" class="tab-content">68 <h3>Collection 3</h3>69 <!-- Content -->70 </div>71 </div>72 73 <script>74 function openTab(evt, tabName) {75 var i, tabcontent, tablinks;76 tabcontent = document.getElementsByClassName("tab-content");77 for (i = 0; i < tabcontent.length; i++) {78 tabcontent[i].style.display = "none";79 }80 tablinks = document.getElementsByClassName("tab");81 for (i = 0; i < tablinks.length; i++) {82 tablinks[i].className = tablinks[i].className.replace(" active", "");83 }84 document.getElementById(tabName).style.display = "block";85 evt.currentTarget.className += " active";86 }87 // Trigger first tab open on load88 document.getElementsByClassName("tab")[0].click();89 </script>90 91 </body>92 </html>93 Enlace
El enlace para compartir es: