ساخت tab های تمام صفحه در وب سایت

ساخت tab های تمام صفحه در وب سایتساخت tab های تمام صفحه در وب سایتآموزش طراحی سایت ساخت tab های تمام صفحه در وب سایتدر این مقاله می آموزیم که چطور با استفاده از CSS و جاوا اسکریپت، tab هایی ایجاد کنیم که تمام کل صفحه مرورگر را در بر گیرند.ساخت One Page Tab در وب سایتقدم اول : کد HTML را اضافه کنید.مثال :<button class="tablink" ="openPage('Home', this, 'red')">Home</button><button class="tablink" ="openPage('News', this, 'green')" id="defaultOpen">News</button><button class="tablink" ="openPage('Contact', this, 'blue')">Contact</button><button class="tablink" ="openPage('About', this, 'orange')">About</button><div id="Home" class="tabcontent"><h3>Home</h3><p>Home is where the heart is..</p></div><div id="News" class="tabcontent"><h3>News</h3><p>Some news this fine day!</p></div><div id="Contact" class="tabcontent"><h3>Contact</h3><p>Get in touch, or swing by for a cup of coffee.</p></div><div id="About" class="tabcontent"><h3>About</h3><p>Who we are and what we do.</p></div>دکمه هایی ایجاد کنید تا با استفاده از آنها بتوانید محتویات 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;}قدم سوم : برای ساخت نهایی تب های تمام صفحه، کد جاوا اسکریپت زیر را وارد کنید.مثال ساخت منو تمام صفحه :"> <!DOCTYPEhtml> <html> <head> "> <metaname="viewport"content="width=device-width,initial-scale=1"> <style> *{box-sizing:border-box} /*Setheightofbodyandthedocumentto100%*/ body,html{ height:100%; margin:0; font-family:Arial; } /*Styletablinks*/ .tablink{ background-color:#555; color:white; float:left; border:none; outline:none; cursor:pointer; padding:14px16px; font-size:17px; width:25%; } .tablink:hover{ background-color:#777; } /*Stylethetabcontent(andaddheight:100%forfullpagecontent)*/ .tabcontent{ color:white; display:none; padding:100px20px; height:100%; } #Home{background-color:red;} #News{background-color:green;} #Contact{background-color:blue;} #About{background-color:orange;} </style> </head> <body> Home</button>"> <buttonclass="tablink"="openPage('Home',this,'red')">Home</button> News</button>"> <buttonclass="tablink"="openPage('News',this,'green')"id="defaultOpen">News</button> Contact</button>"> <buttonclass="tablink"="openPage('Contact',this,'blue')">Contact</button> About</button>"> <buttonclass="tablink"="openPage('About',this,'orange')">About</button> "> <divid="Home"class="tabcontent"> Home"> Home Homeiswheretheheartis.."> Homeiswheretheheartis.. "> "> <divid="News"class="tabcontent"> News"> News Somenewsthisfineday!"> Somenewsthisfineday! "> "> <divid="Contact"class="tabcontent"> Contact"> Contact Getintouch,orswingbyforacupofcoffee."> Getintouch,orswingbyforacupofcoffee. "> "> <divid="About"class="tabcontent"> About"> About Whoweareandwhatwedo."> Whoweareandwhatwedo. "> functionopenPage(pageName,elmnt,color){ vari,tabcontent,tablinks; tabcontent=document.getElementsByClassName("tabcontent"); for(i=0;i<tabcontent.length;i++){ tabcontent[i].style.display="none"; } tablinks=document.getElementsByClassName("tablink"); for(i=0;i<tablinks.length;i++){ tablinks[i].style.backgroundColor=""; } document.getElementById(pageName).style.display="block"; elmnt.style.backgroundColor=color; } //Gettheelementwithid="defaultOpen"andclickonit document.getElementById("defaultOpen").click(); </body> </html> توجه:بخشساختتبدروبسایترامطالعهکنید. جهت مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید.