Πώς να δημιουργήσετε: Καρτέλες που εμφανίζονται κατά την ανακύψεις του ποντικιού

Μάθετε πώς να χρησιμοποιήσετε το CSS και το JavaScript για να εναλλάξετε τις καρτέλες κατά την ανακύψεις του ποντικιού.

Δημιουργία οριζόντιας καρτέλας που μπορεί να επιχειρηθεί

Πρώτη βήμα - Προσθήκη HTML:

<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 είναι η πρωτεύουσα της Αγγλίας.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris είναι η πρωτεύουσα της Γαλλίας.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo είναι η πρωτεύουσα της Ιαπωνίας.</p>
</div>

Δημιουργία κουμπιών για το άνοιγμα συγκεκριμένου περιεχομένου της καρτέλας. Όλα τα στοιχεία με class="tabcontent" του <div> Τα στοιχεία είναι προεπιλεγμένα κρυμμένα (μέσω CSS και JS). Όταν ο χρήστης θέτει το ποντίκι πάνω από το κουμπί, ανοίγει το περιεχόμενο της καρτέλας που ταιριάζει στο κουμπί.

Δεύτερη βήμα - Προσθήκη CSS:

Ρυθμίσεις για το στυλ του κουμπιού και του περιεχομένου της καρτέλας:

/* Ρυθμίσεις για το στυλ της καρτέλας */
.tab {
  float: left;
  border: 1px solid #ccc;
  χρώμα υποβάθρου: #f1f1f1;
  πλάτος: 30%;
  height: 300px;
}
/* Ρυθμίσεις για το στυλ του κουμπιού που ανοίγει το περιεχόμενο της καρτέλας */
.tab button {
  προσθήκη: block;
  χρώμα υποβάθρου: κληρονομημένο;
  χρώμα: μαύρο;
  χώρος: 22px 16px;
  πλάτος: 100%;
  πύλη: καμία;
  outline: none;
  text-align: left;
  cursor: pointer;
}
/* Αλλαγή χρώματος φόντου του κουμπιού όταν η μύαλη του ποντικιού είναι επάνω του */
.tab button:hover {
  background-color: #ddd;
}
/* Δημιουργία κλάσης "ενεργής/τρέχουσας" για το κουμπί ετικέτας */
.tab button.active {
  background-color: #ccc;
}
/* Ρύθμιση στυλ περιεχομένου ετικέτας */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

Τρίτο βήμα - Προσθήκη JavaScript:

function openCity(evt, cityName) {
  // Δήλωση όλων των μεταβλητών
  var i, tabcontent, tablinks;
  // Λήψη όλων των στοιχείων με κλάση="tabcontent" και κρυφή τους
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "μηδέν";
  }
  // Λήψη όλων των στοιχείων με κλάση="tablinks" και διαγραφή της κλάσης "ενεργητική"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" ενεργητική", "");
  }
  // Εμφάνιση της τρέχουσας σελίδας ετικέτας και προσθήκη της κλάσης "ενεργητική" στο σύνδεσμο που ανοίγει την ετικέτα
  document.getElementById(cityName).style.display = "πλατύς";
  evt.currentTarget.className += " ενεργητική";
}

Try it yourself

Related pages

Tutorial:How to create a tab