سلام برنامه | HiProgram

آموزش تصویری ساخت تب برای سایت (tab) موضوع بحث امروز ما

آموزش تصویری ساخت تب برای سایت (tab) تنها با html و css و javascript

سلام برنامه این آموزش تصویری به زبان فارسی را برای شما آماده کرده است.

امروزه در بسیاری از سایت ها از جمله سایت های خبری تب ها را می توانید ببینید.

ساخت تب برای سایت های فروشگاهی بسیار کاربردی است و مشابه آن را می توانید در دیجی کالا ببینید.

برای ساخت تب کد های زیر را به قسمت body اضافه کنید:

<div class="tab">
<button class="tablinks" onClick="openDL(event, 'Download')" id="defaultOpen">عنوان تب اول</button>
<button class="tablinks" onClick="openDL(event, 'Desc')">عنوان تب دوم</button>
<button class="tablinks" onClick="openDL(event, 'Pass')">عنوان تب سوم</button>
</div>

<div id="Download" class="tabcontent">
	<h3>
سر تیتر تب اول	
	</h3>
	<p>محتوای تب اول</p>
</div>

<div id="Desc" class="tabcontent">
	<h3>
سر تیتر تب دوم
	</h3>
	<p>محتوای تب دوم</p>
</div>

<div id="Pass" class="tabcontent">
	<h3>
سر تیتر تب سوم
	</h3>
	<p>محتوای تب سوم</p>
</div>

بعد از آن برای استایل دهی و مرتب سازی کد های زیر را به css خود اضافه کنید:

body{
	direction:rtl;
	font-family:tahoma;
}

div.tab{
	overflow:hidden;
	border:1px solid #ccc;
	background-color:#f1f1f1;
}

div.tab button{
	background-color:inherit;
	float:right;
	border:none;
	outline:none;
	cursor:pointer;
	padding:14px 16px;
	transition:0.3s;
	font-size:17px;
}
div.tab button.active{
	background-color:#ccc;
}
.tabcontent{
	display:none;
	padding:6px 12px;
	border:1px solid #ccc;
	border-top:none;
}

و در نهایت برای اجرا کد های جاوا اسکریپت زیر را در انتهای کد html خود تب اضافه کنید.

<script>
function openDL(evt,dlName){
	var i, tabcontent,tablinks;
	tabcontent = document.getElementsByClassName("tabcontent");
	for(i = 0; i < tabcontent.length; i++){
		tabcontent[i].style.display="none";
	}
	tablinks = document.getElementsByClassName("tablinks");
	for(i = 0; i < tablinks.length; i++){
		tablinks[i].className = tablinks[i].className.replace("active","");
	}
	
	document.getElementById(dlName).style.display = "block";
    evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>

در اینجا کار طراحی تب تمام است

شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری ساخت تب را از باکس دانلود موجود در زیر همین پست همراه سورس کد آن دریافت نمایید