הגדרת פריט פעיל בתפריט המבוסס על כתובת ה- URL הנוכחית עם jQuery

בעיה זו צצה שוב ושוב בעת בניית אתרים: כיצד אוכל לקבוע את מיקומו הנוכחי של המשתמש כדי שאוכל להדגיש את החלק הפעיל בתפריט הניווט? זהו צורך בסיסי כל כך, אך נראה שהפתרון מוצא מחדש בכל מבנה חדש.

ישנם שני מסלולים עיקריים שתוכלו לנקוט בעת פתרון בעיה זו באופן דינמי, מצד השרת וצד הלקוח. לפתור את זה בצד השרת זה נחמד כי תהיה לך טיפול טוב יותר בדף המבוקש, אבל זה לא תמיד מעשי. עם מעט תכנון, זה די פשוט לפתור את זה בצד הלקוח באמצעות JavaScript (ואופציונלי jQuery).

נניח שיש לך תפריט ניווט בסיסי בכותרת שלך ואתה רוצה לשנות את צבע הרקע של הדף הנוכחי שאתה נמצא בו.

באופן אידיאלי, כאשר תלחץ על סיור ותעבור לדף הסיור, תרצה שהתפריט ישקף את מיקומך הנוכחי.

לשם כך באמצעות jQuery, נשווה את מאפיין href של כל קישור תפריט לכתובת האתר של הדפדפן הנוכחי וננסה למצוא התאמה. אם נמצא התאמה, נגדיר את האלמנט הזה לפעיל על ידי הוספת מחלקה ל-

  • אֵלֵמֶנט.

    התוצאה נטו של הדוגמה הבסיסית הזו נראית כך

    בכל טעינת עמוד סקריפט זה מבצע ומשווה את ה- href של כל קישור תפריט לכתובת האתר של הדף הנוכחי שמתחיל אחרי שם הדומיין וממשיך קדימה בכמה שיותר תווים שיש ב- href (בדומה לפונקציה startsWith ()). זה מאפשר לכל עמודי המשנה של "סיור" לסמן גם את הסיור כקטע הפעיל למשל, /our/section2.html. כאשר נמצא התאמה, אלמנט ההורה - במקרה זה an

  • - נוסף לו מחלקה של "פעיל".

    פתרון זה ניתן למצוא באתר jsFiddle לשימוש והוא מוטמע למטה. הדבר העיקרי שתצטרך לשנות לצרכים שלך הוא בורר ".nav" בשורה 9 של JavaScript. יש לשנות זאת כדי לבחור את רכיב הניווט שברצונך לעבד.

    שים לב שהדוגמה jsFiddle לא תעבוד מכיוון שאתה לא יכול לשנות את כתובת ה- URL בחלון התוצאה, אבל אתה יכול להעתיק את הקוד בקלות לקובץ HTML כדי לבדוק אותו.