איך ניתן לעשות הארה אוטומטית בתפריט לפי השוואה לURL הנוחכי

לדוגמא יש לי תפריט שנראה ככה

קוד:

<a href="http://mydomain.com/page1/">page1</a>
<a href="http://mydomain.com/page2/">page2</a>
<a href="http://mydomain.com/page3/">page3</a>
<a href="http://mydomain.com/page4/">page4</a>

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

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


ענבר.

• שיהיה יום נפלא.
• עשוי להכיל בוטנים, חלקי אגוזים, סרקזם, אירוניה, ואף ציניות

באמצעות Java Script.

קוד:

window.document.location.href

(במקרה זה, לא חייבים לגשת לערך באמצעות הנתיב המלא, מספיק שני הערכים האמצעיים).

אני מכירה את הערך הזה, לכן יש לי תחושה שזה אפשרי, אבל אני תקועה קצת במימוש של זה

• שיהיה יום נפלא.
• עשוי להכיל בוטנים, חלקי אגוזים, סרקזם, אירוניה, ואף ציניות

התחלת משהו?

אם כן יש לי הרגשה חזקה שתצטרכי להיעזר ב regexp

אם לא אז חכי לשוּבִּי

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/list.png]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/?https://2010-uploaded.fresh.co.il/2010/09/21/52868411.gif,http://www.boredpanda.com/blog/wp-content/themes/mimbo2.2/images/subscribe-panda-605px.png]

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

את יכולה לעשות בדיקה בכל קישור - בשלב "כתיבת" הקישור, ואת יכולה לעבור לאחר מכן על כל הקישורים ולבצע את הבדיקה בהתאם.

קוד:

<ul id="mainMenu">
	<li><a href="1">Link 1</a></li>
	<li><a href="2">Link 2</a></li>
	<li><a href="3">Link 3</a></li>
</ul>

-----------------------------------

var d = document;

var links = d.getElementById("mainMenu").getElementsByTagName("a");
var currentPath = window.document.location.pathname;
for(var i=0; i<links.length; i++){
	if(links[i].href == currentPath){
		links[i].className = "currentPage";
		break;
	}
}

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

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

אני לא בטוח שהבנתי למה את מתכוונת, את רוצה שכפתור בתפריט ישנה תצוגה כשאת נמצאת עליו?
אם כן אז השתמשי בסלקטור hover ב־CSS

לדוגמא:

קוד:

<a href="http://mydomain.com/page1/" id="link1">page1</a>

כאשר העיצוב יהיה מהצורה:

קוד:

#link1:hover { blah: blah;}

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



אפשר גם להשתמש במאפיין האירוע onmouseover בשביל סקריפטים יותר מסובכים (תפריטים נגללים ושיט).

לדוגמא:

קוד:

<a href="http://mydomain.com/page1/" onmouseover="foo(this);">page1</a>

כאשר foo()‎ היא פונקציה שמקבלת את האובייקט ומשנה את העיצוב שלו או עושה איתו מה שבא לך.






עריכה: הנה דוגמא ל־"הארה" של קישורים באמצעות הסלקטור hover‏:
http://www.w3schools.com/cssref/try...rycss_sel_hover

והנה דוגמאות לשימוש באירועים onmouseover ו־onmouseout‏:
http://www.w3schools.com/jsref/tryi...ref_onmouseover
http://www.w3schools.com/js/tryit.a...tryjs_animation

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

אני הייתי מכין את המחלקה בCSS וב js (אחרי שהצלחתי לדעת באיזה דף אני נמצא) מכניס אותו למקום המתאים.


אלא אם באמת צריך סקריפטים יותר מסובכים (תפריטים נגללים ושיט)...

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/list.png]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/?https://2010-uploaded.fresh.co.il/2010/09/21/52868411.gif,http://www.boredpanda.com/blog/wp-content/themes/mimbo2.2/images/subscribe-panda-605px.png]

אהה עכשיו רק הבנתי למה הכוונה ב־"ה־URL שבו אני עומדת"..
אני חשבתי שמדובר על "עומדת" עם העכבר, ולא שנמצאת בדף שהקישור מוביל אליו.

במקרה הזה, לדעתי במקום ב־href יותר כדאי להשתמש ב־location.pathname, הוא יחזיר רק את החלק שלאחר הדומיין (/pageX/)

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.