Η τοποθέτηση κρυφών τμημάτων κειμένου βελτιώνει την οπτική αντίληψη μιας σελίδας ιστότοπου - φορτώνει στο πρόγραμμα περιήγησης ακριβώς όπως το σχεδίασε ο σχεδιαστής, ανεξάρτητα από τον όγκο των πληροφοριών που δημοσιεύτηκε. Επιπλέον, είναι πιο βολικό για τον επισκέπτη - αναζητώντας το απαραίτητο μπλοκ πληροφοριών, δεν χρειάζεται να κοιτάξει ολόκληρη τη σειρά, αλλά μόνο μικρές "συμβουλές των παγόβουνων".
Είναι απαραίτητο
Βασικές γνώσεις HTML και JavaScript
Οδηγίες
Βήμα 1
Χρησιμοποιήστε μια προσαρμοσμένη συνάρτηση JavaScript για να αποκρύψετε και να εμφανίσετε τα επιθυμητά τμήματα κειμένου σε μια σελίδα HTML. Μια κοινή λειτουργία για όλα τα μπλοκ είναι πολύ πιο βολική από την προσθήκη κώδικα σε καθένα ξεχωριστά. Στο τμήμα κεφαλίδας του πηγαίου κώδικα της σελίδας, τοποθετήστε τις ετικέτες σεναρίου ανοίγματος και κλεισίματος και μεταξύ τους δημιουργήστε μια κενή συνάρτηση με όνομα, για παράδειγμα, ανταλλαγή και μία απαιτούμενη ταυτότητα παραμέτρου εισαγωγής: λειτουργία ανταλλαγής (id) {}
Βήμα 2
Προσθέστε δύο γραμμές κώδικα JavaScript στο σώμα της συνάρτησης, μεταξύ των σγουρών τιράντες. Η πρώτη γραμμή θα πρέπει να διαβάζει την τρέχουσα κατάσταση του μπλοκ κειμένου - αν η ορατότητά του είναι ενεργοποιημένη ή απενεργοποιημένη. Μπορεί να υπάρχουν πολλά τέτοια μπλοκ σε ένα έγγραφο, οπότε το καθένα πρέπει να έχει το δικό του αναγνωριστικό - είναι η λειτουργία του που λαμβάνει id ως τη μόνη παράμετρο εισαγωγής. Χρησιμοποιώντας αυτό το αναγνωριστικό, αναζητά το απαραίτητο μπλοκ στο έγγραφο, εκχωρώντας την τιμή ορατότητας / αόρατου (κατάσταση της ιδιότητας εμφάνισης) στη μεταβλητή sDisplay: sDisplay = document.getElementById (id).style.display;
Βήμα 3
Η δεύτερη γραμμή θα πρέπει να αλλάξει την ιδιότητα εμφάνισης του επιθυμητού μπλοκ κειμένου στο αντίθετο - απόκρυψη εάν το κείμενο είναι ορατό και εμφάνιση εάν είναι κρυμμένο. Αυτό μπορεί να γίνει με τον ακόλουθο κώδικα: document.getElementById (id).style.display = sDisplay == 'none'; '': 'κανένας';
Βήμα 4
Προσθέστε το ακόλουθο φύλλο στυλ στην ενότητα κεφαλίδας: a {δρομέας: δείκτης} Θα χρειαστείτε αυτό για να εμφανιστεί σωστά το δείκτη του ποντικιού όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια ελλιπή ετικέτα συνδέσμου. Με τη βοήθεια τέτοιων συνδέσμων, οργανώνετε στη σελίδα για να αλλάξετε την ορατότητα / αόρατο των μπλοκ κειμένου.
Βήμα 5
Τοποθετήστε αυτούς τους εναλλακτικούς συνδέσμους στο κείμενο πριν από κάθε κρυφό μπλοκ και στα μπλοκ στο τέλος του κειμένου, προσθέστε έναν παρόμοιο σύνδεσμο. Κλείστε το αόρατο κείμενο σε ετικέτες εύρους που έχουν ορατότητα στα χαρακτηριστικά στυλ τους. Για παράδειγμα: Ανάπτυξη κειμένου +++ Αυτό είναι κρυφό κείμενο --- Σε αυτό το παράδειγμα, κάνοντας κλικ σε έναν σύνδεσμο τριών συν θα καλέσει την παραπάνω συνάρτηση στο συμβάν onClick, μεταβιβάζοντάς το το αναγνωριστικό του μπλοκ για να γίνει ορατό. Και μέσα στο μπλοκ υπάρχει ένας σύνδεσμος τριών αρνητικών με τις ίδιες λειτουργίες - κάνοντας κλικ σε αυτό θα κρύψει το κείμενο.
Βήμα 6
Δημιουργήστε τον απαιτούμενο αριθμό μπλοκ κειμένου, παρόμοιο με αυτό που περιγράφεται στο προηγούμενο βήμα, θυμηθείτε να αλλάξετε τα αναγνωριστικά στο χαρακτηριστικό id της ετικέτας span και στη μεταβλητή που μεταβιβάστηκε στη συνάρτηση από το συμβάν onClick στους δύο συνδέσμους.
