Πώς να δημιουργήσετε: Κατακόρυφες καρτέλες

Μάθετε πώς να δημιουργήσετε ένα μενού καρτελών κατακόρυφων σελίδων χρησιμοποιώντας CSS και JavaScript.

Δημιουργία αναδιπλούμενης κάθετης καρτέλας

Βήμα 1 - Προσθήκη HTML:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">Λονδίνο</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Παρίσι</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Τόκιο</button>
</div>
<div id="London" class="tabcontent">
  <h3>Λονδίνο</h3>
  <p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Παρίσι</h3>
  <p>Το Παρίσι είναι η πρωτεύουσα της Γαλλίας.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Τόκιο</h3>
  <p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας.</p>
</div>

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

Βήμα 2 - Προσθήκη CSS:

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

* {περιλαμβάνει πλαίσιο: κουτί}
/* Στυλ της καρτέλας */
.tab {
  float: left;
  border: 1px solid #ccc;
  χρώμα υποβάθρου: #f1f1f1;
  πλάτος: 30%;
  height: 300px;
}
/* Ορισμός του στυλ για το κουμπί που ανοίγει το περιεχόμενο της καρτέλας */
.tab κουμπί {
  εμφάνιση: μπλοκ;
  χρώμα υποβάθρου: από κοινού;
  χρώμα: μαύρο;
  πλαίσιο: 22px 16px;
  πλάτος: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}
/* Αλλαγή του χρώματος του παρασκήνιου του κουμπιού κατά την πλοήγηση */
.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;
}

Τρίτο βήμα - Προσθήκη 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 = "none";
  }
  // Αποκάλυψη όλων των στοιχείων με κλάση="tablinks" και αφαίρεση της κλάσης "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Εμφάνιση της τρέχουσας καρτέλας και προσθήκη της κλάσης "active" στο σύνδεσμο που ανοίγει την καρτέλα
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:Πώς να δημιουργήσω ετικέτες οριζόντιες