Paano gumawa: Tab title
Matuto kung paano gumawa ng tab title gamit ang CSS at JavaScript.
Tab title
I-klik ang "city" button para ipakita ang katugmang title:
London
London ay ang kapital na siyudad ng Inglatera.
Paris
Paris ay ang kapital ng France.
Tokyo
Tokyo ay ang kapital ng Japan.
Oslo
Oslo ay ang kapital ng Norway.
Lumikha ng pagbabalik-baliw na tab title
Unang hakbang - Magdagdag ng HTML:
<div id="London" class="tabcontent"> <h1>London</h1> <p>London ay ang kapital na siyudad ng Inglatera.</p> </div> <div id="Paris" class="tabcontent"> <h1>Paris</h1> <p>Paris ay kapital ng Pransya.</p> </div> <div id="Tokyo" class="tabcontent"> <h1>Tokyo</h1> <p>Tokyo ay kapital ng Hapon.</p> </div> <div id="Oslo" class="tabcontent"> <h1>Oslo</h1> <p>Oslo ay kapital ng Norway.</p> </div> <button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> <button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> 创建按钮以打开特定的标签页内容。所有具有类 "tabcontent" 的 <div> 元素默认隐藏(使用 CSS 和 JS)。当用户点击按钮时 - 它将打开与该按钮 "匹配" 的标签页内容。
第二步 - 添加 CSS:
设置按钮和标签页内容的样式:
/* 设置标签页按钮的样式 */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* I-baguhin ang kulay ng background ng buton kapag nakalapitan */ .tablink:hover { background-color: #777; } /* I-set ng default ang estilo ng nilalaman ng tab */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* I-set ng hiwa ang estilo ng nilalaman ng bawat tab */ #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;}
Ikatlong hakbang - Magdagdag ng JavaScript:
function openCity(cityName, elmnt, color) { // Bawasan ang lahat ng elementong may class="tabcontent" sa default var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Alisin ang lahat ng kulay ng background sa mga tablinks/button tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Ipakita ang nilalaman ng partikular na tab document.getElementById(cityName).style.display = "block"; // Magdagdag ng espesyal na kulay sa buton na magbukas ng nilalaman ng tab elmnt.style.backgroundColor = color; } // Hanapin ang elemento na may id="defaultOpen" at i-clickin ito document.getElementById("defaultOpen").click();
相关页面
教程:如何创建标签页