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

تفاوت با ویرایش جدیدتر ←

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

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

توضیحات الگو

@@ خط ۱: / خط ۱: @@
+<noinclude>
+توضیحات الگو
+</noinclude>
+<includeonly>
 <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
      <div style="display: flex; background: #f5f5f5;">
-         <div onclick="showTab('cat1')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #4CAF50; color: white;">{{{1}}}</div>
+         <div id="tab1-btn" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #4CAF50; color: white;" onclick="document.getElementById('tab1').style.display='block'; document.getElementById('tab2').style.display='none'; document.getElementById('tab3').style.display='none'; this.style.background='#4CAF50'; this.style.color='white'; document.getElementById('tab2-btn').style.background='#f5f5f5'; document.getElementById('tab2-btn').style.color='#333'; document.getElementById('tab3-btn').style.background='#f5f5f5'; document.getElementById('tab3-btn').style.color='#333';">{{{1}}}</div>
-         <div onclick="showTab('cat2')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;">{{{2}}}</div>
-         <div onclick="showTab('cat3')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;">{{{3}}}</div>
+         <div id="tab2-btn" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;" onclick="document.getElementById('tab1').style.display='none'; document.getElementById('tab2').style.display='block'; document.getElementById('tab3').style.display='none'; this.style.background='#4CAF50'; this.style.color='white'; document.getElementById('tab1-btn').style.background='#f5f5f5'; document.getElementById('tab1-btn').style.color='#333'; document.getElementById('tab3-btn').style.background='#f5f5f5'; document.getElementById('tab3-btn').style.color='#333';">{{{2}}}</div>
+         <div id="tab3-btn" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;" onclick="document.getElementById('tab1').style.display='none'; document.getElementById('tab2').style.display='none'; document.getElementById('tab3').style.display='block'; this.style.background='#4CAF50'; this.style.color='white'; document.getElementById('tab1-btn').style.background='#f5f5f5'; document.getElementById('tab1-btn').style.color='#333'; document.getElementById('tab2-btn').style.background='#f5f5f5'; document.getElementById('tab2-btn').style.color='#333';">{{{3}}}</div>
      </div>
-     <div id="cat1" style="padding: 15px; display: block;">
+     <div id="tab1" style="padding: 15px; display: block;">
          <categorytree mode="all" hideroot="true">{{{1}}}</categorytree>
      </div>
-     <div id="cat2" style="padding: 15px; display: none;">
+     <div id="tab2" style="padding: 15px; display: none;">
          <categorytree mode="all" hideroot="true">{{{2}}}</categorytree>
      </div>
-     <div id="cat3" style="padding: 15px; display: none;">
+     <div id="tab3" style="padding: 15px; display: none;">
          <categorytree mode="all" hideroot="true">{{{3}}}</categorytree>
      </div>
 </div>
+</includeonly>
-<script>
-function showTab(tabId) {
-    document.getElementById('cat1').style.display = 'none';
-    document.getElementById('cat2').style.display = 'none';
-    document.getElementById('cat3').style.display = 'none';
-    var tabs = document.querySelectorAll('div[onclick^="showTab"]');
-    tabs.forEach(function(tab) {
-        tab.style.background = '#f5f5f5';
-        tab.style.color = '#333';
-    });
-    document.getElementById(tabId).style.display = 'block';
-    event.target.style.background = '#4CAF50';
-    event.target.style.color = 'white';
-}
-</script>