الگو:تب رده

{{{1}}} {{{2}}} {{{3}}}

<style> .tab-container { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }

.tab-buttons { display: flex; background: #f5f5f5; border-bottom: 1px solid #ddd; }

.tab-button { flex: 1; text-align: center; padding: 12px; cursor: pointer; background: #f5f5f5; color: #333; border: none; font-size: 14px; }

.tab-button.active { background: #4CAF50; color: white; font-weight: bold; }

.tab-content { padding: 15px; display: none; }

.tab-content.active { display: block; } </style>

<script> document.addEventListener('DOMContentLoaded', function() {

   var tabButtons = document.querySelectorAll('.tab-button');
   
   tabButtons.forEach(function(button) {
       button.addEventListener('click', function() {
           var tabId = this.getAttribute('data-tab');
           
           // Remove active class from all buttons and contents
           document.querySelectorAll('.tab-button').forEach(function(btn) {
               btn.classList.remove('active');
           });
           document.querySelectorAll('.tab-content').forEach(function(content) {
               content.classList.remove('active');
           });
           
           // Add active class to clicked button and corresponding content
           this.classList.add('active');
           document.getElementById(tabId).classList.add('active');
       });
   });

}); </script>