ఎలా సృష్టించాలి: పూర్తి పేజీ టాబ్లెట్
పూర్తి బ్రౌజర్ విండోను కవర్ చేసే పూర్తి పేజీ టాబ్లెట్లను CSS మరియు JavaScript ద్వారా సృష్టించండి (పూర్తి స్క్రీన్ టాబ్లెట్లు).
పూర్తి పేజీ టాబ్లెట్
లింకును క్లిక్ చేసి "ప్రస్తుత" పేజీని చూపిస్తారు:
హోమ్
హోమ్ హృదయం ఉంది...
వార్తలు
ఈ ప్రతిష్టాత్మక రోజున కొన్ని వార్తలు!
పరిచయం
పరిచయం పొందండి లేదా కాఫీ కు వచ్చినాకు.
నామము మరియు నామము చేసే విషయం
మేము ఎవరము మరియు మేము ఏమి చేస్తున్నాము.
ఒకటో పేజీ టాబ్లెట్ సృష్టించండి
మొదటి చర్య - HTML జోడించండి:
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button> <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button> <button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button> <button class="tablink" onclick="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>
创建按钮以打开特定的标签页内容。所有带有 class="tabcontent"
的 <div>
元素默认都是隐藏的(通过 CSS 和 JS)。当用户点击按钮时,它会打开与这个按钮“匹配”的标签页内容。
第二步 - 添加 CSS:
设置链接和标签页内容(全页)的样式:
/* 设置 body 和 document 的高度为 100%,以启用“全页标签页” body, html { height: 100%; margin: 0; font-family: Arial; } /* 设置标签页链接的样式 */ .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; } /* టాబ్ పేజీ కంటెంట్ స్టైల్స్ సెట్ చేస్తారు (మరియు పూర్తి పేజీకి అడుగును 100% చేస్తారు) */ .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) { // డిఫాల్ట్ గా అన్ని class="tabcontent" అంశాలను దాచుతారు var i, 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; } // ఐడిలో "defaultOpen" యొక్క అంశాన్ని పొంది అది క్లిక్ చేస్తారు document.getElementById("defaultOpen").click();
相关页面
教程:如何创建标签页