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

Δημιουργήστε μια εμπειρία στυλ εφαρμογών στους ιστοτόπους σας

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

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

Χρησιμοποιώντας το & lt; div & gt; για να βελτιώσετε την εμπειρία του θεατή

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

Τι χρειάζεστε

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

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

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

Μάθετε HTML

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

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

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

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

Μάθετε HTML
  • Δωρεάν HTML Κλάση
  • HTML Tutorial a>
  • Τι είναι το XHTML;

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

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

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

    .hidden {εμφάνιση: κανένας; }. μηδέν {εμφάνιση: μπλοκ? }}

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

    .hidden {ορατότητα: κρυφό; }. μηδέν {ορατότητα: ορατή; }}

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

    class = "hidden" >

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

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

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