Hur man skapar: Fylla sidan med etiketter
- Föregående sida Flikrubrik
- Nästa sida Håll muspekaren över flik
Lär dig hur du använder CSS och JavaScript för att skapa etiketter som täcker hela webbläsarens fönster (fullskärmsetiketter).
Fylla sidan med etiketter
Klicka på länken för att visa "current"-sida:
Hem
Hem är där hjärtat är...
Nyheter
Nyheter denna fantastiska dag!
Kontakt
Kontakta oss eller kom förbi för en kopp kaffe.
Om oss
Vem vi är och vad vi gör.
Skapa en ensidig etikett
Första steget - Lägg till 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;
}
/* Ställ in stilen för flikinnehållet (och lägg till höjd: 100% till sidans innehåll) */
.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;}
Tredje steg - Lägg till JavaScript:
function openPage(pageName, elmnt, color) {
// Dölj alla element med class="tabcontent" som standard
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Ta bort bakgrundsfärgen från alla fliklänkar/knappar
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Visa specifikt innehåll i flikarna
document.getElementById(pageName).style.display = "block";
// Lägg till en specifik färg till knappen som öppnar innehållet i flikarna
elmnt.style.backgroundColor = color;
}
// Hämta elementet med id="defaultOpen" och klicka på det
document.getElementById("defaultOpen").click();
Relaterade sidor
Tutorial:Hur man skapar flikar
- Föregående sida Flikrubrik
- Nästa sida Håll muspekaren över flik
