Hover bilan ochiladigan tablar
CSS va JavaScript yordamida sichqoncha ustiga olib borilganda (hover) tablarni almashtirishni o‘rganing.
Hover bilan ochiladigan tablar
Tab kontentini ko‘rsatish uchun sichqonchani menyu tugmalaridan biri ustiga olib boring:
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Hover bilan ochiladigan vertikal tablar yaratish
1-qadam) HTML qo‘shing:
Misol
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
Muayyan tab kontentini ochish uchun tugmalar yarating. class="tabcontent" bo‘lgan barcha <div> elementlari standart holatda yashirin bo‘ladi (CSS va JS yordamida) — foydalanuvchi sichqonchani tugma ustiga olib borganda shu tugmaga "mos keladigan" tab kontenti ochiladi.
2-qadam) CSS qo‘shing:
Tugmalar va tab kontentiga uslub bering:
Misol
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}
3-qadam) JavaScript qo‘shing:
Misol
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 the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
O‘zingiz sinab ko‘ring »
Maslahat: Qanday qilinadi — Tablar sahifasini ham ko‘rib chiqing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!