یادداشت: تفاوت میان نسخهها
جزبدون خلاصۀ ویرایش برچسب: ویرایش مبدأ ۲۰۱۷ |
جزبدون خلاصۀ ویرایش برچسب: ویرایش مبدأ ۲۰۱۷ |
||
| خط ۱: | خط ۱: | ||
<includeonly> | |||
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;"> | <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;"> | ||
<div style="display: flex; background: #f5f5f5;"> | |||
<div style="display: flex; background: #f5f5f5 | <div onclick="showTab('cat1')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #4CAF50; color: white;">مقالات</div> | ||
<div style="flex: 1; text-align: center; padding: 10px; background: #4CAF50; color: white | <div onclick="showTab('cat2')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;">اخبار</div> | ||
<div style="flex: 1; text-align: center; padding: 10px; color: #333;"> | <div onclick="showTab('cat3')" style="flex: 1; text-align: center; padding: 10px; cursor: pointer; background: #f5f5f5; color: #333;">آموزش</div> | ||
<div style="flex: 1; text-align: center; padding: 10px; color: #333;"> | |||
</div> | </div> | ||
<div id="cat1" style="padding: 15px; display: block;"> | |||
<div style="padding: 15px;"> | |||
<categorytree mode="all" hideroot="true">مقالات</categorytree> | <categorytree mode="all" hideroot="true">مقالات</categorytree> | ||
</div> | </div> | ||
<div id="cat2" style="padding: 15px; display: none;"> | |||
<categorytree mode="all" hideroot="true">اخبار</categorytree> | |||
</div> | |||
<div id="cat3" style="padding: 15px; display: none;"> | |||
<categorytree mode="all" hideroot="true">آموزش</categorytree> | |||
</div> | |||
</div> | |||
<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> | |||
</includeonly> | |||