مشخصات مقاله
-
817
-
0.0
-
2813
-
0
-
0
ساخت tab های تمام صفحه در وب سایت
در این مقاله می آموزیم که چطور با استفاده از CSS و جاوا اسکریپت، tab هایی ایجاد کنیم که تمام کل صفحه مرورگر را در بر گیرند.
ساخت One Page Tab در وب سایت
قدم اول : کد HTML را اضافه کنید.
مثال :
Home
Home is where the heart is..
News
Some news this fine day!
Contact
Get in touch, or swing by for a cup of coffee.
About
Who we are and what we do.
دکمه هایی ایجاد کنید تا با استفاده از آنها بتوانید محتویات tab خاصی را باز کنید. تمام مولفه های با class="tabcontent" بصورت پیش فرض محو هستند ( با استفاده از CSS و Javascript). زمانیکه کاربر روی دکمه کلیک می کند محتویات tab ای باز می شود که مربوط به همان دکمه می باشد.
قدم دوم : کد CSS را اضافه کنید. به لینک ها و محتویات tab فرم دهید (تمام صفحه).
مثال :
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
قدم سوم : برای ساخت نهایی تب های تمام صفحه، کد جاوا اسکریپت زیر را وارد کنید.
مثال ساخت منو تمام صفحه :
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
توجه : بخش ساخت تب در وبسایت را مطالعه کنید.