Μερικές φορές, όταν σχεδιάζετε μια ιστοσελίδα, είναι απαραίτητο να αποκρύψετε ορισμένα από τα στοιχεία που τοποθετούνται σε αυτήν. Για παράδειγμα, εάν θέλετε ο επισκέπτης να μην δει τα κουμπιά υποβολής φόρμας έως ότου συμπληρωθούν όλα τα απαιτούμενα πεδία. Ή εάν το κουμπί δεν προορίζεται να χρησιμοποιηθεί καθόλου από τον επισκέπτη, αλλά το σενάριο που βρίσκεται σε αυτήν τη σελίδα θα πρέπει να "κάνει κλικ" σε αυτό.
Οδηγίες
Βήμα 1
Χρησιμοποιήστε την ιδιότητα εμφάνισης των Cascading Style Sheets (CSS) για να απενεργοποιήσετε ή να εμφανίσετε τα επιθυμητά στοιχεία σελίδας. Σύμφωνα με τα διεθνή πρότυπα, σε αυτήν την ιδιότητα μπορούν να εκχωρηθούν περισσότερες από μιάμιση δωδεκάδες τιμές που καθορίζουν διαφορετικές μεθόδους εμφάνισης. Ωστόσο, μόνο τέσσερα είναι cross-browser (δηλαδή, λειτουργούν σε όλα τα μεγάλα προγράμματα περιήγησης). Μεταξύ αυτών των τεσσάρων, δεν υπάρχει καμία τιμή που χρειάζεστε, η οποία σας επιτρέπει να αποκρύψετε το επιθυμητό στοιχείο σελίδας.
Βήμα 2
Δημιουργήστε το απαιτούμενο σύνολο οδηγιών CSS. Στην απλούστερη μορφή του, μπορεί να μοιάζει με αυτό: κουμπί {display: none;} Σε αυτήν την περίπτωση, η σελίδα δεν θα εμφανίζει όλα τα κουμπιά χρησιμοποιώντας την… ετικέτα.
Βήμα 3
Προσθέστε μια ένδειξη στο όνομα της τάξης στις οδηγίες εάν θέλετε να αποκρύψετε μόνο ένα κουμπί ή μια συγκεκριμένη ομάδα κουμπιών. Για παράδειγμα, ονομάστε μια τέτοια κλάση HideBtns και προσθέστε αυτό το όνομα στη δήλωση CSS: button. HideBtns {display: none;} Προσθέστε το χαρακτηριστικό class στο επιθυμητό κουμπί στον κώδικα HTML της σελίδας και αντιστοιχίστε την τιμή HideBtns: κρυφό κουμπί
Βήμα 4
Εφαρμόστε την ιδιότητα εμφάνισης με καμία τιμή στο γονικό στοιχείο εάν θέλετε, για παράδειγμα, να αποκρύψετε όχι μόνο το κουμπί, αλλά και άλλα στοιχεία της φόρμας ιστού. Η φόρμα θεωρείται "γονέας" όλων των στοιχείων που τοποθετούνται μεταξύ των ετικετών και. Για παράδειγμα:
Εδώ, ένα πεδίο κειμένου και ένα κουμπί για την υποβολή της εισαγόμενης τιμής τοποθετούνται μέσα στη φόρμα. Η φόρμα έχει αντιστοιχιστεί σε μια τάξη με το όνομα HideForm, οπότε για να αποκρύψετε τόσο το πεδίο εισαγωγής όσο και το κουμπί, πρέπει να αλλάξετε τη δήλωση CSS ως εξής: form. HideForm {display: none;}
Βήμα 5
Τοποθετήστε τον έτοιμο κώδικα στο παραπάνω παράδειγμα στην κεφαλίδα του εγγράφου ιστού (μεταξύ των ετικετών και). Για να πείτε στο πρόγραμμα περιήγησης του επισκέπτη ότι πρόκειται για κώδικα CSS, πρέπει να περικλείεται μεταξύ των ετικετών τύπου HTML ανοίγματος και κλεισίματος:
κουμπί. HideBtns {display: none;}
