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();

亲自试一试

相关页面

教程:如何创建标签页