الگو:تب رده: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

نسخهٔ ‏۲۹ سپتامبر ۲۰۲۵، ساعت ۱۵:۰۴

الگوی تب

@@ خط ۱: / خط ۱: @@
-<div class="tab-container">
+<noinclude>
-<div class="tab-buttons">
+الگوی تب
-<span class="tab-button active" data-tab="tab1">{{{1}}}</span>
+</noinclude>
-<span class="tab-button" data-tab="tab2">{{{2}}}</span>
+<includeonly>
-<span class="tab-button" data-tab="tab3">{{{3}}}</span>
+<div style="border:1px solid #ddd; border-radius:8px; overflow:hidden; margin:10px 0;">
+<!-- تب‌ها -->
+<div style="display:flex; background:#f8f9fa; border-bottom:1px solid #ddd;">
+<span style="flex:1; text-align:center; padding:12px; background:#28a745; color:white; font-weight:bold; cursor:pointer;" onclick="this.parentNode.parentNode.children[1].children[0].style.display='block'; this.parentNode.parentNode.children[1].children[1].style.display='none'; this.parentNode.parentNode.children[1].children[2].style.display='none'; this.parentNode.parentNode.children[1].children[3].style.display='none'; this.style.background='#28a745'; this.style.color='white'; this.parentNode.children[1].style.background='#f8f9fa'; this.parentNode.children[1].style.color='#333'; this.parentNode.children[2].style.background='#f8f9fa'; this.parentNode.children[2].style.color='#333'; this.parentNode.children[3].style.background='#f8f9fa'; this.parentNode.children[3].style.color='#333';">{{{1}}}</span>
+<span style="flex:1; text-align:center; padding:12px; background:#f8f9fa; color:#333; cursor:pointer;" onclick="this.parentNode.parentNode.children[1].children[0].style.display='none'; this.parentNode.parentNode.children[1].children[1].style.display='block'; this.parentNode.parentNode.children[1].children[2].style.display='none'; this.parentNode.parentNode.children[1].children[3].style.display='none'; this.style.background='#28a745'; this.style.color='white'; this.parentNode.children[0].style.background='#f8f9fa'; this.parentNode.children[0].style.color='#333'; this.parentNode.children[2].style.background='#f8f9fa'; this.parentNode.children[2].style.color='#333'; this.parentNode.children[3].style.background='#f8f9fa'; this.parentNode.children[3].style.color='#333';">{{{2}}}</span>
+<span style="flex:1; text-align:center; padding:12px; background:#f8f9fa; color:#333; cursor:pointer;" onclick="this.parentNode.parentNode.children[1].children[0].style.display='none'; this.parentNode.parentNode.children[1].children[1].style.display='none'; this.parentNode.parentNode.children[1].children[2].style.display='block'; this.parentNode.parentNode.children[1].children[3].style.display='none'; this.style.background='#28a745'; this.style.color='white'; this.parentNode.children[0].style.background='#f8f9fa'; this.parentNode.children[0].style.color='#333'; this.parentNode.children[1].style.background='#f8f9fa'; this.parentNode.children[1].style.color='#333'; this.parentNode.children[3].style.background='#f8f9fa'; this.parentNode.children[3].style.color='#333';">{{{3}}}</span>
+<span style="flex:1; text-align:center; padding:12px; background:#f8f9fa; color:#333; cursor:pointer;" onclick="this.parentNode.parentNode.children[1].children[0].style.display='none'; this.parentNode.parentNode.children[1].children[1].style.display='none'; this.parentNode.parentNode.children[1].children[2].style.display='none'; this.parentNode.parentNode.children[1].children[3].style.display='block'; this.style.background='#28a745'; this.style.color='white'; this.parentNode.children[0].style.background='#f8f9fa'; this.parentNode.children[0].style.color='#333'; this.parentNode.children[1].style.background='#f8f9fa'; this.parentNode.children[1].style.color='#333'; this.parentNode.children[2].style.background='#f8f9fa'; this.parentNode.children[2].style.color='#333';">{{{4}}}</span>
 </div>
-<div class="tab-content active" id="tab1">
+<!-- محتوا -->
+<div>
+<div style="padding:15px; display:block;">
 <categorytree mode="all" hideroot="true">{{{1}}}</categorytree>
 </div>
+<div style="padding:15px; display:none;">
-<div class="tab-content" id="tab2">
 <categorytree mode="all" hideroot="true">{{{2}}}</categorytree>
 </div>
+<div style="padding:15px; display:none;">
-<div class="tab-content" id="tab3">
 <categorytree mode="all" hideroot="true">{{{3}}}</categorytree>
+</div>
+<div style="padding:15px; display:none;">
+<categorytree mode="all" hideroot="true">{{{4}}}</categorytree>
+</div>
 </div>
 </div>
+</includeonly>
-<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>