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

Ανοίξτε τη σελίδα 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. Αυτή η καρτέλα θα είναι η ανοιχτή καρτέλα όταν βλέπουμε την ιστοσελίδα.

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