Υποενότητα 4.1: Πλοήγηση με καρτέλες

Εισαγωγή

 Σε αυτήν την υποενότητα, εξετάζουμε τις καρτέλες - tabs και την πλοήγηση με καρτέλες - tabbed navigation. Οι καρτέλες απαιτούν την ενεργοποίηση της υποστήριξης Javascript για πλοήγηση στο περιεχόμενο.

Εμείς θα:

• Σχεδιάσουμε μια ιστοσελίδα για να χρησιμοποιήσουμε την περιήγηση με καρτέλες - tabbed navigation για να οργανώσουμε το περιεχόμενο
• Θα χρησιμοποιήσουμε επίσης κελιά καρτελών - tab panels για την οργάνωση του περιεχομένου
• Διευκολύνουμε την πλοήγηση ανάμεσα στα tab panes χρησιμοποώντας τα tabbed navigation elements

Δείτε περισσότερα σχετικά με την πλοήγηση με καρτέλες

Προσθήκη Tab Navigation

Ανοίξτε τη σελίδα aboutus.html και μεταβείτε στη δεύτερη σειρά περιεχομένων που περιέχει τις λεπτομέρειες της corporate leadership.

Αμέσως μετά την επικεφαλίδα -heading Corporate Leadership, εισαγάγετε τον ακόλουθο κώδικα για να ρυθμίσετε την πλοήγηση με καρτέλες:

Code

Σημειώστε τη χρήση της <ul> tag με τις nav and nav-tabs classesγια τη ρύθμιση στην πλοήγηση των καρτελών.

Κάθε στοιχείο λίστας στη λίστα λειτουργεί ως  στοιχείο καρτέλας. Μέσα σε κάθε στοιχείο της λίστας, σημειώστε ότι δημιουργήσαμε τις ετικέτες <a>  με το href να "δείχνει" το id του tab pane του περιεχομένου που θα εισαχθεί αργότερα.

Επίσης, σημειώστε ότι η <a> tag περιέχει το χαρακτηριστικό data-toggle=tab attribute. Η ετικέτα <a> του πρώτου στοιχείου της λίστας περιέχει την κλάση ενεργή - active. Αυτή η καρτέλα θα είναι η ανοιχτή καρτέλα όταν βλέπουμε την ιστοσελίδα.

Μπορούμε να μεταβούμε στις άλλες καρτέλες χρησιμοποιώντας την πλοήγηση με καρτέλες που μόλις δημιουργήσαμε.

Προσθήκη περιεχομένου καρτελών -Tab Content

Οι λεπτομέρειες για τους διάφορους corporate leaders πρέπει τώρα να οργανωθούν σε διάφορα tab panes.  Για να ξεκινήσει αυτό, θα περικλείσουμε ολόκληρο το περιεχόμενο σε ένα στοιχείο div με το την class tab-content όπως ορίζεται παρακάτω: 

<div class="tab-content">
  ...
</div>

Στη συνέχεια, παίρνουμε το όνομα και την περιγραφή του CEO της εταιρείας και το παραθέτουμε σε ένα tab-pane ως εξής:

<div role="tabpanel" class="tab-pane fade show active" id="tab1">
  <h3> ... </h3>
  <p> ... </p>
</div>

Σημειώστε τη χρήση των tab-pane, fade, show, and active classes και του tab1 ως id. Είναι το ίδιο id που χρησιμοποιείται ως href στον σύνδεσμο <a> στην πλοήγηση.

Το υπόλοιπο περιεχόμενο είναι επίσης παρόμοια περικλεισμένο μέσα στα κατάλληλα divs με τα σωστά αναγνωριστικά - ids και τις κλάσεις που ορίζονται παραπάνω.  Μόνο το πρώτο tab pane θα έχει τις show and active classes που υποδεικνύουν ότι το περιεχόμενο θα πρέπει να είναι ορατό στην ιστοσελίδα, από προεπιλογή.

Η HTML view είναι:

Τab-content CSS

Τροποποιούμε τα στυλ CSS για την κλάση tab-content στο αρχείο mystyles.css ως εξής:

.tab-content {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}

Αυτή η τροποποίηση προσθέτει ένα περιθώριο 1px στο tab content που συνδέεται με το ανώτερο περιθώριο που εισάγεται από το στοιχείο tab navigation για να δώσει μια καθαρή καρτέλα

Do a Git commit

Κάντε μια Git commit με το μήνυμα "Tabs".

Σε αυτήν την υποενότητα, μάθαμε τη χρήση της περιήγησης με καρτέλες - tabbed navigation, του περιεχομένου καρτελών - tab content και των κελιών - panes και τη χρήση τους για την οργάνωση και την πλοήγηση στο περιεχόμενο μιας σελίδας.