|
|
| (۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <div class="tab-container"> | | <div style="max-height: {{{ارتفاع|400px}}}; overflow: auto; border: 1px solid #bccaff; padding: 2px; border-radius: 5px; background-color: #fbfcff; margin: 1em auto;"> |
| <div class="tab-buttons">
| | {{#if: {{{تیتر|}}} | <div style="white-space: nowrap; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; font-size: 120%; font-weight: bold; text-align: center; padding: 5px; margin: 0px; background-color: #E8DDCD; border: 2px solid #DAC9B4; border-bottom: none;">{{{تیتر|}}}</div>}} |
| <span class="tab-button active" data-tab="tab1">{{{1}}}</span>
| | <tabber> |
| <span class="tab-button" data-tab="tab2">{{{2}}}</span>
| | |-| اساتید = |
| <span class="tab-button" data-tab="tab3">{{{3}}}</span> | | <categorytree mode="all" hideroot="true">اساتید</categorytree> |
| </div> | |
|
| |
|
| <div class="tab-content active" id="tab1">
| | |-| مقالات = |
| <categorytree mode="all" hideroot="true">{{{1}}}</categorytree> | | <categorytree mode="all" hideroot="true">مقالات</categorytree> |
| </div>
| |
|
| |
|
| <div class="tab-content" id="tab2">
| | |-| کتابخانه = |
| <categorytree mode="all" hideroot="true">{{{2}}}</categorytree> | | <categorytree mode="all" hideroot="true">کتابخانه</categorytree> |
| </div>
| |
|
| |
|
| <div class="tab-content" id="tab3">
| | |-| موضوعات = |
| <categorytree mode="all" hideroot="true">{{{3}}}</categorytree> | | <categorytree mode="all" hideroot="true">موضوعات</categorytree> |
| </div> | | </tabber> |
| </div> | | </div> |
|
| |
| <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>
| |
