Αυτός ο οδηγός θα εξηγήσει πώς να δημιουργήσετε καρτέλες με CSS και JavaScript.
Πώς να δημιουργήσετε καρτέλες με CSS και JavaScript;
Αυτή η ενότητα εκτελεί οδηγίες βήμα προς βήμα για τη δημιουργία καρτελών με CSS και JavaScript.
Βήμα 1: Δημιουργία δομής καρτελών με χρήση HTML
Αρχικά, κοιτάξτε τον κώδικα HTML που δημιουργεί τη δομή των καρτελών HTML:
< div id = 'tab1' στο κλικ = 'πρώτα()' > Σπίτι div >
< div id = 'tab2' στο κλικ = 'δεύτερος();' > Σχετικά με div >
< div id = 'tab3' στο κλικ = 'τρίτος();' > Επικοινωνήστε μαζί μας div >
< br />
< div id = 'συνέχεια 1' > Καλώς ήρθατε στο Linuxhint ! div >
< div id = 'cont2' > ΤΕΧΝΟΛΟΓΙΚΗ ΕΚΠΑΙΔΕΥΣΗ
Έχουμε δημιουργήσει πολλά προϊόντα για να σας βοηθήσουμε να μάθετε για το Linux, τον Προγραμματισμό, την Επιστήμη Υπολογιστών και πολλά άλλα.
div >
< div id = 'cont3' >
Μπορείτε να επικοινωνήσετε με την ομάδα μας στο editor AT linuxhit DOT com.
div >
Στις παραπάνω γραμμές κώδικα:
- Ο ' Η ετικέτα προσθέτει ένα στοιχείο div με ένα αναγνωριστικό 'tab1' και ένα συνημμένο ' στο κλικ ' συμβάν για την εκτέλεση του συνδεδεμένου ' πρώτα() Λειτουργεί όταν κάνετε κλικ. Αυτό το στοιχείο λειτουργεί ως καρτέλα HTML.
- Η παραπάνω μέθοδος εκτελείται για τα επόμενα δύο στοιχεία div.
- Ο '
Η ετικέτα ' προσθέτει μια αλλαγή γραμμής.- Ο '
Η ετικέτα ' εισάγει ξανά ένα στοιχείο div με εκχωρημένο αναγνωριστικό 'cont1'. Αυτό το στοιχείο εμφανίζει το περιεχόμενο της καρτέλας που δημιουργήθηκε σε ένα μπλοκ.- Τα επόμενα δύο»
Οι ετικέτες προσθέτουν επίσης στοιχεία div με τα αναγνωριστικά που έχουν εκχωρηθεί.
Βήμα 2: Διαμόρφωση καρτελών στυλ χρησιμοποιώντας CSSΤώρα, εφαρμόστε τις ιδιότητες στυλ CSS για να προσαρμόσετε τις καρτέλες και τα περιεχόμενά τους σύμφωνα με την επιλογή σας:
< στυλ >
#tab1, #tab2, #tab3 {
φλοτέρ : αριστερά ;
υλικό παραγεμίσματος : 5px 10px 5px 10px ;
Ιστορικό : πορτοκαλοκόκκινο ;
χρώμα : #FFFFFF ;
περιθώριο : 0px 5px 0px 5px ;
δρομέας : δείκτης ;
σύνορο - ακτίνα κύκλου : 3 εικονοστοιχεία ;
}
#καρτέλα1 : τοποθετήστε το δείκτη του ποντικιού, #tab2 : τοποθετήστε το δείκτη του ποντικιού, #tab3 : φτερουγίζω {
Ιστορικό : πράσινος ;
}
#cont1, #cont2, #cont3 {
πλάτος : 300 εικονοστοιχεία ;
ύψος : 100 εικονοστοιχεία ;
υλικό παραγεμίσματος : 40 εικονοστοιχεία ;
γραμματοσειρά - Μέγεθος : Μεσαίο ;
γραμματοσειρά - οικογένεια : «Times New Roman» , Times, serif ;
σύνορο : 2 px στερεά πορτοκαλί ;
σύνορο - ακτίνα κύκλου : 7 εικονοστοιχεία ;
απεικόνιση : κανένας ;
}
στυλ >Στο αναφερόμενο απόσπασμα κώδικα:
- Πρώτα, αποκτήστε πρόσβαση στο ' καρτέλες ' χρησιμοποιώντας τα αναγνωριστικά που τους έχουν εκχωρηθεί και προσαρμόστε τα μέσω των ακόλουθων ιδιοτήτων στυλ (float, padding, background, color, margin: 0px 5px 0px 5px, cursor και border-radius).
- Στη συνέχεια, επισυνάψτε το ' φτερουγίζω ' πρόγραμμα χειρισμού συμβάντων με τις καρτέλες για αλλαγή των χρωμάτων φόντου τους όταν το ποντίκι χρήστη τοποθετείται πάνω τους.
- Μετά από αυτό, αποκτήστε πρόσβαση στο ' περιεχόμενο καρτελών ' αποθηκευμένα στα στοιχεία div των οποίων τα αναγνωριστικά είναι 'cont1', 'cont2' και 'cont3'. Τώρα, εφαρμόστε τις ακόλουθες ιδιότητες στυλ (πλάτος, ύψος, επένδυση, μέγεθος γραμματοσειράς, οικογένεια γραμματοσειράς, περίγραμμα, ακτίνα περιγράμματος και εμφάνιση) σε αυτά.
Βήμα 3: Προσθήκη λειτουργιών σε καρτέλες χρησιμοποιώντας JavaScriptΤέλος, προσθέστε λειτουργίες στις δημιουργημένες καρτέλες με τη βοήθεια JavaScript:
< γραφή >
λειτουργία πρώτα ( ) {
έγγραφο. getElementById ( 'συνέχεια 1' ) . στυλ . απεικόνιση = 'ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ' ;
έγγραφο. getElementById ( 'cont2' ) . στυλ . απεικόνιση = 'κανένας' ;
έγγραφο. getElementById ( 'cont3' ) . στυλ . απεικόνιση = 'κανένας' ;
}
λειτουργία δεύτερη ( ) {
έγγραφο. getElementById ( 'cont2' ) . στυλ . απεικόνιση = 'ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ' ;
έγγραφο. getElementById ( 'συνέχεια 1' ) . στυλ . απεικόνιση = 'κανένας' ;
έγγραφο. getElementById ( 'cont3' ) . στυλ . απεικόνιση = 'κανένας' ;
}
λειτουργία τρίτη ( ) {
έγγραφο. getElementById ( 'cont3' ) . στυλ . απεικόνιση = 'ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ' ;
έγγραφο. getElementById ( 'συνέχεια 1' ) . στυλ . απεικόνιση = 'κανένας' ;
έγγραφο. getElementById ( 'cont2' ) . στυλ . απεικόνιση = 'κανένας'
}
γραφή >Οι παραπάνω γραμμές κώδικα:
- Ορίστε μια συνάρτηση με το όνομα ' πρώτα '.
- Σε αυτόν τον ορισμό συνάρτησης, το ' document.getElementById() Η μέθοδος έχει πρόσβαση στο στοιχείο div του οποίου το αναγνωριστικό είναι 'cont1' και εφαρμόζει το ' στυλ ” ακίνητο με ” ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ” αξία σε αυτό. Αυτή η ιδιότητα θα εμφανίσει το περιεχόμενο της καρτέλας στην οποία κάνει κλικ ο χρήστης.
- Στη συνέχεια, το 'document.getElementById()' αποκτά πρόσβαση σε άλλο div και εφαρμόζει την ιδιότητα 'style' που έχει τιμή 'none' για να την αποκρύψει. Θα κρύψει αυτό το στοιχείο στην ιστοσελίδα.
- Η παραπάνω μέθοδος εκτελείται για τα επόμενα προσπελάσιμα στοιχεία div. Αυτό συμβαίνει επειδή η συνάρτηση «πρώτη» εμφανίζει μόνο το περιεχόμενο της καρτέλας της οποίας η τιμή της ιδιότητας «στυλ» είναι «μπλοκ» και κρύβει τις υπόλοιπες.
- Η παραπάνω διαδικασία εκτελείται για τις επόμενες συναρτήσεις “second()” και “third()”.
Παραγωγή
Μπορεί να φανεί ότι οι καρτέλες έχουν δημιουργηθεί με επιτυχία και εμφανίζουν το αντίστοιχο περιεχόμενό τους στο κλικ του χρήστη.
συμπέρασμα
Για να δημιουργήσετε καρτέλες, δημιουργήστε πρώτα τις δομές τους χρησιμοποιώντας 'HTML' και, στη συνέχεια, προσαρμόστε τις με τη βοήθεια των ιδιοτήτων στυλ CSS. Οι ιδιότητες στυλ προστίθενται χωρίς εξαγωγή πρόσθετου φύλλου στυλ. Αυτές οι ιδιότητες κάνουν τις καρτέλες ελκυστικές και εντυπωσιακές. Μόλις δημιουργηθούν και προσαρμοστούν οι καρτέλες, χρησιμοποιήστε τη γλώσσα προγραμματισμού JavaScript για να προσθέσετε λειτουργίες σε αυτές. Αυτός ο οδηγός έχει ουσιαστικά εξηγήσει την πλήρη διαδικασία δημιουργίας καρτελών με CSS και JavaScript.