Mwongozo wa kufanya: Makini ya uwanja wa kiwango kikomo

Mwongozo wa kufanya: Makini ya uwanja wa kiwango kikomo

Makini ya uwanja wa kiwango kikomo

Makini ya uwanja wa kiwango inayofanana na programu ya web ya eneo moja au wasayari wa eneo la kitabu kinachotumika kwa uonekano wa matukio mbalimbali.

London

London ina mji mkuu wa Uingereza.

Paris

Paris ina msingi wa mji mkuu wa Ufaransa.

Tokyo

Tokyo ni mji mkuu wa Japan.

Kuhusika kwa kutumia: Kusoma wa kusoma wa kusoma

Kichwa cha tablio yenye tablio ambayo inaweza kuwahusiana

Tukio kwanza - Ongeza HTML:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London ni mji mkuu wa Uingereza.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris ni mji mkuu wa Ufaransa.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo ni mji mkuu wa Japan.</p>
</div>

Kichwa cha kufungua tablio kina maelezo yenye tablio. Mabara yote ya tablio yana class="tabcontent" ya <div> Vifaa vyote ni viwiliwa kwa kuzingatia CSS na JS). Kwa sababu ya kichukua mibaridi, vifaa hivyo vinaweza kufungua maelezo ya tablio yenye uhusiano na mibaridi hiyo.

Tukio pili - Ongeza CSS:

Ufafanuzi wa mibaridi na maelezo ya tablio:

* {box-sizing: border-box}
/* Ufafanuzi wa tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}
/* Mifungo wa muhimu wa kufungua tab kina tablio kwa maelezo ya tablio */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}
/* Change the background color of the button when hovered */
.tab button:hover {
  background-color: #ddd;
}
/* Create the active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}
/* Set the style of the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

Third step - Add JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;
  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Get all elements with class="tablinks" and remove "active" class
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Show the current tab page and add "active" class to the link that opens the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Kuhusika kwa kutumia: Kusoma wa kusoma wa kusoma

Kuhusika kwa kutumia: Kusoma wa kusoma wa kusoma

Kuhusika kwa kutumia: Kusoma wa kusoma wa kusomaKuhusika kwa kutumia: Kusoma wa kusoma wa kusoma