Αυτό το πρόβλημα εμφανίζεται ξανά και ξανά κατά τη δημιουργία ιστότοπων: Πώς μπορώ να προσδιορίσω την τρέχουσα τοποθεσία του χρήστη, ώστε να μπορώ να επισημάνω την ενεργή ενότητα στο μενού πλοήγησης; Είναι τόσο βασική ανάγκη, αλλά η λύση φαίνεται να ανακαλύπτεται εκ νέου σε κάθε νέα κατασκευή.
Υπάρχουν δύο κύριες διαδρομές που μπορείτε να ακολουθήσετε κατά την επίλυση αυτού του προβλήματος με δυναμικό τρόπο, από πλευράς διακομιστή και πελάτη. Η επίλυση αυτού από την πλευρά του διακομιστή είναι ωραία επειδή θα έχετε καλύτερη διαχείριση στη σελίδα που ζητάτε, αλλά δεν είναι πάντα πρακτική. Με λίγο προγραμματισμό, είναι πολύ απλό να το επιλύσετε από την πλευρά του πελάτη χρησιμοποιώντας JavaScript (και προαιρετικά jQuery).
Ας υποθέσουμε ότι έχετε ένα βασικό μενού πλοήγησης στην κεφαλίδα σας και θέλετε να αλλάξετε το χρώμα φόντου της τρέχουσας σελίδας στην οποία βρίσκεστε.
Στην ιδανική περίπτωση, όταν κάνετε κλικ στην Περιήγηση και μεταβείτε στη σελίδα Περιήγηση, θα θέλατε το μενού να αντικατοπτρίζει την τρέχουσα τοποθεσία σας.
Για να το κάνουμε αυτό χρησιμοποιώντας το jQuery, θα συγκρίνουμε το χαρακτηριστικό href κάθε συνδέσμου μενού με την τρέχουσα διεύθυνση URL του προγράμματος περιήγησης και θα προσπαθήσουμε να βρούμε μια αντιστοίχιση. Εάν βρεθεί κάποιος αγώνας, θα θέσουμε αυτό το στοιχείο σε ενεργό προσθέτοντας ένα μάθημα στο
Το καθαρό αποτέλεσμα αυτού του πολύ βασικού παραδείγματος μοιάζει με αυτό
Σε κάθε σελίδα φορτώστε αυτό το σενάριο εκτελεί και συγκρίνει το href κάθε συνδέσμου μενού με την τρέχουσα διεύθυνση URL σελίδας ξεκινώντας μετά το όνομα τομέα και συνεχίζοντας προς τα εμπρός για όσους χαρακτήρες υπάρχουν στο href (παρόμοια με τη λειτουργία Έναρξη με ()) Αυτό επιτρέπει σε όλες τις δευτερεύουσες σελίδες του "Tour" να επισημάνουν επίσης το Tour ως το ενεργό τμήμα, για παράδειγμα, /tour/section2.html. Όταν βρεθεί ένας αγώνας, το γονικό στοιχείο - σε αυτήν την περίπτωση ένα
Αυτή η λύση μπορεί να βρεθεί στο jsFiddle για χρήση και ενσωματώνεται επίσης παρακάτω. Το κύριο πράγμα που θα πρέπει να αλλάξετε για τις δικές σας ανάγκες είναι ο επιλογέας ".nav" στη γραμμή 9 του JavaScript. Αυτό πρέπει να τροποποιηθεί για να επιλέξετε το στοιχείο πλοήγησης που θέλετε να επεξεργαστείτε.
Λάβετε υπόψη ότι το παράδειγμα jsFiddle δεν θα λειτουργήσει επειδή δεν μπορείτε πραγματικά να αλλάξετε τη διεύθυνση URL στο παράθυρο αποτελεσμάτων, αλλά μπορείτε εύκολα να αντιγράψετε τον κώδικα σε ένα αρχείο HTML για να το δοκιμάσετε.
