Εμφάνιση και απόκρυψη κειμένου ή εικόνων με CSS και JavaScript

Δυναμική HTML (DHTML) σάς επιτρέπει να δημιουργήσετε μια εμπειρία τύπου εφαρμογής στους ιστότοπούς σας, μειώνοντας τη συχνότητα πλήρους φόρτωσης ολόκληρων σελίδων. Στις εφαρμογές, όταν κάνετε κλικ σε κάτι, η εφαρμογή αλλάζει αμέσως για να δείξει αυτό το συγκεκριμένο περιεχόμενο ή για να σας δώσει την απάντησή σας.

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

Χρήση για τη βελτίωση της εμπειρίας των θεατών

Χρησιμοποιώντας το DHTML, ένας από τους ευκολότερους τρόπους βελτίωσης αυτής της εμπειρίας είναι να έχετε div στοιχεία ενεργοποιούνται και απενεργοποιούνται για την εμφάνιση περιεχομένου όταν ζητείται ΕΝΑ στοιχείο div ορίζει λογικές διαιρέσεις στην ιστοσελίδα σας. Σκεφτείτε ένα div ως ένα κουτί που μπορεί να περιέχει παραγράφους, επικεφαλίδες, συνδέσμους, εικόνες και ακόμη και άλλα div.

Τι θα χρειαστείτε

Για να δημιουργήσετε ένα div που μπορεί να ενεργοποιηθεί και να απενεργοποιηθεί, χρειάζεστε τα εξής:

• Ένας σύνδεσμος για τον έλεγχο του div ενεργοποιώντας και απενεργοποιώντας το όταν κάνετε κλικ.
• Το div για εμφάνιση και απόκρυψη.
• CSS για να ορίσετε το div κρυφό ή ορατό.
• JavaScript για να εκτελέσετε την ενέργεια.

Ο σύνδεσμος ελέγχου

Ο σύνδεσμος ελέγχου είναι το πιο εύκολο μέρος. Απλώς δημιουργήστε έναν σύνδεσμο όπως θα κάνατε σε μια άλλη σελίδα. Προς το παρόν, αφήστε το href χαρακτηριστικό κενό.

Μάθετε HTML

Τοποθετήστε το οπουδήποτε στην ιστοσελίδα σας.

Το Div για εμφάνιση και απόκρυψη

Δημιουργήστε το στοιχείο div που θέλετε να εμφανίσετε και να αποκρύψετε. Βεβαιωθείτε ότι το div σας έχει ένα μοναδικό αναγνωριστικό. Στο παράδειγμα, το μοναδικό αναγνωριστικό είναι μάθετε HTML.

Αυτή είναι η στήλη περιεχομένου. Ξεκινά κενό εκτός από αυτό το κείμενο επεξήγησης. Επιλέξτε τι θέλετε να μάθετε στη στήλη πλοήγησης στα αριστερά. Το κείμενο θα εμφανιστεί παρακάτω:

Μάθετε HTML

• Δωρεάν κλάση HTML
• Εκμάθηση HTML
• Τι είναι το XHTML;

Το CSS για εμφάνιση και απόκρυψη του Div

Δημιουργήστε δύο τάξεις για το CSS σας: ένα για να αποκρύψετε το div και το άλλο για να το δείξετε. Έχετε δύο επιλογές για αυτό: προβολή και ορατότητα.

Η οθόνη αφαιρεί το div από τη ροή της σελίδας και η ορατότητα αλλάζει ακριβώς πώς φαίνεται. Μερικοί κωδικοποιητές προτιμούν απεικόνιση, αλλά ωρες ωρες ορατότητα έχει νόημα επίσης. Για παράδειγμα:

. κρυφό {display: none; }
.unhidden {display: block; } 

Εάν θέλετε να χρησιμοποιήσετε την ορατότητα, αλλάξτε αυτές τις τάξεις σε:

.hidden {ορατότητα: κρυφό; }
.unhidden {ορατότητα: ορατό; } 

Προσθέστε την κρυφή κλάση στο div σας, έτσι ώστε να ξεκινάει ως κρυφή στη σελίδα:

JavaScript για να το κάνει να λειτουργεί

Το μόνο που κάνει αυτό το σενάριο είναι να κοιτάξει την τρέχουσα τάξη που έχει οριστεί στο div σας και να το αλλάζει σε μη κρυφό εάν επισημαίνεται ως κρυφό ή αντίστροφα

Αυτό είναι μόνο μερικές γραμμές JavaScript. Τοποθετήστε τα ακόλουθα στο κεφάλι σας Έγγραφο HTML (πριν το.

Τι κάνει αυτό το σενάριο, γραμμή προς γραμμή:

1. Καλεί τη λειτουργία αποκρύψω, και διαιρέστε είναι το ακριβές μοναδικό αναγνωριστικό που θέλετε να εμφανίσετε ή να αποκρύψετε.

2. Ρυθμίζει μια μεταβλητή iτέμ με την αξία του div σας.

3. Εκτελεί έναν απλό έλεγχο του προγράμματος περιήγησης. εάν το πρόγραμμα περιήγησης δεν υποστηρίζει getElementById, αυτό το σενάριο δεν θα λειτουργήσει.

4. Ελέγχει την τάξη στο div. Αν αυτό είναι κρυμμένος, το αλλάζει σε κρυφό. Διαφορετικά, το αλλάζει σε κρυμμένος.

5. Κλείνει το αν δήλωση.

6. Κλείνει τη λειτουργία.

Για να λειτουργήσει το σενάριο, πρέπει να κάνετε ένα ακόμη πράγμα. Επιστρέψτε στον σύνδεσμό σας και προσθέστε το javascript στο χαρακτηριστικό href. Φροντίστε να χρησιμοποιήσετε το ακριβές μοναδικό αναγνωριστικό που ονομάσατε το div σας σε αυτό το href:

Μάθετε HTML 

Συγχαρητήρια! Τώρα έχετε ένα div που θα εμφανίζεται και θα κρύβεται κάθε φορά που κάνετε κλικ σε έναν σύνδεσμο.

Πιθανά προβλήματα που πρέπει να προσέξετε

Αυτό το σενάριο δεν είναι ανόητο. Υπάρχουν ορισμένες καταστάσεις στις οποίες μπορεί να προκαλέσει προβλήματα για εσάς:

1. Το JavaScript δεν είναι ενεργοποιημένο. Εάν οι αναγνώστες σας δεν διαθέτουν JavaScript ή είναι απενεργοποιημένο, αυτό το σενάριο δεν θα λειτουργήσει. Τα κρυφά divs παραμένουν κρυμμένα ανεξάρτητα από το τι κάνουν οι αναγνώστες σας. Ένας τρόπος για να το διορθώσετε είναι να βάλετε τα κρυμμένα div σε μια περιοχή noscript, αλλά θα πρέπει να παίξετε με αυτό για να τα εμφανίσετε σωστά.

2. Πάρα πολύ περιεχόμενο. Αυτό μπορεί να είναι ένα εξαιρετικό εργαλείο για να επιτρέψετε στους αναγνώστες σας να βλέπουν μόνο το περιεχόμενο που χρειάζονται, αλλά αν τοποθετήσετε πάρα πολλά μέσα στα κρυφά div, μπορεί να επηρεάσει δραστικά τον τρόπο φόρτωσης της σελίδας. Να θυμάστε ότι παρόλο που το περιεχόμενο δεν εμφανίζεται, το πρόγραμμα περιήγησης ιστού εξακολουθεί να το κατεβάζει, οπότε χρησιμοποιήστε σωστά το περιεχόμενο που κρύβετε.

3. Οι πελάτες δεν καταλαβαίνουν. Τέλος, οι πελάτες ενδέχεται να μην έχουν συνηθίσει να κάνουν κλικ σε έναν σύνδεσμο που εμφανίζει ή αποκρύπτει περιεχόμενο. Παίξτε με εικονίδια (καθώς και σημάδια και βέλη λειτουργούν καλά) ή κείμενο για να εξηγήσετε τι θα συμβεί στους πελάτες σας. Μια άλλη λύση είναι να αφήσετε ένα από τα div ανοιχτά ενώ τα άλλα είναι κλειστά. Αυτό μπορεί να μεταδώσει την ιδέα στους πελάτες σας, ώστε να καταλάβουν πιο γρήγορα πώς να ανοίξουν το υπόλοιπο περιεχόμενο.

Πρέπει πάντα να δοκιμάζετε το Dynamic HTML όπως αυτό στους πελάτες σας. Μόλις αισθανθείτε σίγουροι ότι μπορούν να το καταλάβουν και να το χρησιμοποιήσουν, αυτός μπορεί να είναι ένας πολύ καλός τρόπος για να αποκτήσετε μεγάλο μέρος του περιεχομένου στις ιστοσελίδες σας χωρίς να καταλάβετε πολύ ορατό χώρο.