صبح نجف

صفحهٔ اصلی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
خط ۹۸: خط ۹۸:
     </div>
     </div>


<!-- مورد سوم - کتابخانه -->
<!-- مورد سوم - کتابخانه -->
<div style="border: 1px solid #e0e6ed; border-radius: 12px; padding: 0; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;">
<div style="border: 1px solid #e0e6ed; border-radius: 12px; padding: 0; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;">
     <h2 style="text-align: center; padding: 16px; margin: 0; background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%); color: #2c3e50; font-size: 18px; font-weight: 600;">کتابخانه</h2>
     <h2 style="text-align: center; padding: 16px; margin: 0; background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%); color: #2c3e50; font-size: 18px; font-weight: 600;">کتابخانه</h2>
      
      
     <div style="padding: 0;">
     <div style="padding: 0;">
        <!-- تب‌ها -->
         <div style="display: flex; border-bottom: 1px solid #e0e6ed;">
         <div style="display: flex; border-bottom: 1px solid #e0e6ed;">
             <button onclick="showTab('tab1')" style="flex: 1; padding: 12px; border: none; background: #f8f9fa; cursor: pointer; font-size: 14px; color: #2c3e50;" id="tab1-btn">رده اول</button>
             <div onclick="showTab(1)" style="flex: 1; text-align: center; padding: 12px; cursor: pointer; background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%); color: white; font-size: 14px; font-weight: 600;">رده اول</div>
             <button onclick="showTab('tab2')" style="flex: 1; padding: 12px; border: none; background: #f8f9fa; cursor: pointer; font-size: 14px; color: #2c3e50;" id="tab2-btn">رده دوم</button>
             <div onclick="showTab(2)" style="flex: 1; text-align: center; padding: 12px; cursor: pointer; background: #f8f9fa; color: #2c3e50; font-size: 14px;">رده دوم</div>
         </div>
         </div>
          
          
        <!-- محتوای تب‌ها -->
         <div id="tab1" style="padding: 15px; max-height: 400px; overflow-y: auto; font-size: 13px;">
         <div style="padding: 15px; max-height: 400px; overflow-y: auto; font-size: 13px;">
             <categorytree mode="all" hideroot="true" depth="1">۰۱- باب اول: فضیلت عقل و مذمت جهل (ابواب عقل و جهل)</categorytree>
             <div id="tab1" class="tab-content">
        </div>
                <categorytree mode="all" hideroot="true" depth="1">۰۱- باب اول: فضیلت عقل و مذمت جهل (ابواب عقل و جهل)</categorytree>
       
            </div>
        <div id="tab2" style="padding: 15px; max-height: 400px; overflow-y: auto; font-size: 13px; display: none;">
           
            <categorytree mode="all" hideroot="true" depth="1">نام_رده_دوم</categorytree>
            <div id="tab2" class="tab-content" style="display: none;">
                <categorytree mode="all" hideroot="true" depth="1">نام_رده_دوم</categorytree>
            </div>
         </div>
         </div>
     </div>
     </div>
خط ۱۲۳: خط ۱۱۹:


<script>
<script>
function showTab(tabId) {
function showTab(tabNumber) {
     // مخفی کردن همه تب‌ها
     // مخفی کردن همه تب‌ها
     var tabContents = document.getElementsByClassName('tab-content');
     document.getElementById('tab1').style.display = 'none';
     for (var i = 0; i < tabContents.length; i++) {
     document.getElementById('tab2').style.display = 'none';
        tabContents[i].style.display = 'none';
    }
      
      
     // غیرفعال کردن همه دکمه‌ها
     // غیرفعال کردن همه تب‌ها
     var tabButtons = document.querySelectorAll('button[onclick^="showTab"]');
     var tabs = document.querySelectorAll('div[onclick^="showTab"]');
     tabButtons.forEach(function(btn) {
     tabs.forEach(function(tab) {
         btn.style.background = '#f8f9fa';
         tab.style.background = '#f8f9fa';
         btn.style.color = '#2c3e50';
         tab.style.color = '#2c3e50';
        tab.style.fontWeight = 'normal';
     });
     });
      
      
     // نمایش تب انتخاب شده
     // نمایش تب انتخاب شده
     document.getElementById(tabId).style.display = 'block';
     document.getElementById('tab' + tabNumber).style.display = 'block';
      
      
     // فعال کردن دکمه انتخاب شده
     // فعال کردن تب انتخاب شده
     document.getElementById(tabId + '-btn').style.background = 'linear-gradient(135deg, #c5e1a5 0%, #aed581 100%)';
     event.target.style.background = 'linear-gradient(135deg, #c5e1a5 0%, #aed581 100%)';
     document.getElementById(tabId + '-btn').style.color = 'white';
     event.target.style.color = 'white';
    event.target.style.fontWeight = '600';
}
}
// فعال کردن تب اول به صورت پیشفرض
showTab('tab1');
</script>
</script>
<style>
.tab-content {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
button[onclick^="showTab"]:hover {
    background: #e9ecef !important;
}
</style>
</div>
</div>
برگرفته از «http://zooha.ir/صفحهٔ_اصلی»