إضافة تبويبات أفقية HTML - CSS - JavaScript

<style>

.tabs-container{display:flex;gap:5px;flex-wrap:wrap;}

.cnmu-tabs{background-color:#f8f8f8;padding:0 15px;height:40px;color:#000;border:0;cursor:pointer;font:inherit;}

.cnmu-tabs:hover{background-color:#446eac;color:#fff;transition:all .4s;}

button.cnmu-tabs.active-tab{background-color:#446eac;color:#fff;}

.tab-content{display:none;border:1px solid #eee;padding:15px;}

</style>

<div class="tabs-container">

<button class="cnmu-tabs" onclick="openTab(event, 'tab1')">تبويب 1</button>

<button class="cnmu-tabs" onclick="openTab(event, 'tab2')">تبويب 2</button>

<button class="cnmu-tabs" onclick="openTab(event, 'tab3')">تبويب 3</button>

</div>

<div id="tab1" class="tab-content active-tab">

محتوى التبويب الأول

</div>

<div id="tab2" class="tab-content">

محتوى التبويب الثاني

</div>

<div id="tab3" class="tab-content">

محتوى التبويب الثالث

</div>

<script>

function openTab(event,tabId){var tabContents=document.getElementsByClassName("tab-content");for(var i=0;i<tabContents.length;i++){tabContents[i].style.display="none"}var tabLinks=document.getElementsByClassName("cnmu-tabs");for(var i=0;i<tabLinks.length;i++){tabLinks[i].className=tabLinks[i].className.replace(" active-tab","")}document.getElementById(tabId).style.display="block";event.currentTarget.className+=" active-tab"}document.getElementById("tab1").style.display="block";document.getElementsByClassName("cnmu-tabs")[0].className+=" active-tab";

</script>