Tämä ongelma nousee esiin yhä uudelleen verkkosivustoja rakennettaessa: Kuinka voin määrittää käyttäjän nykyisen sijainnin, jotta voin korostaa aktiivisen osion navigointivalikossa? Se on niin perustarve, mutta ratkaisu näyttää keksittävän uudelleen jokaisessa uudessa rakennuksessa.
Voit ratkaista tämän ongelman dynaamisesti kahdella pääreitillä, palvelin- ja asiakaspuolella. Tämän ratkaiseminen palvelinpuolella on mukavaa, koska sinulla on parempi käsiteltävä pyytämäsi sivu, mutta se ei ole aina käytännöllistä. Pienellä suunnittelulla on melko yksinkertaista ratkaista tämä asiakaspuolella JavaScriptin (ja valinnaisesti jQueryn) avulla.
Oletetaan, että otsikossa on perusnavigointivalikko ja haluat muuttaa nykyisen sivusi taustaväriä.
Ihannetapauksessa, kun napsautat kierrosta ja siirryt esittelysivulle, haluat, että valikossa näkyy nykyinen sijaintisi.
Jos haluat tehdä tämän jQueryn avulla, vertaamme jokaisen valikkolinkin href-määritettä nykyisen selaimen URL-osoitteeseen ja yritämme löytää osuman. Jos vastaavuus löytyy, asetamme kyseisen elementin aktiiviseksi lisäämällä luokan
Tämän hyvin yksinkertaisen esimerkin nettotulos näyttää tältä
Jokaisella sivulatauksella tämä komentosarja suorittaa jokaisen valikkolinkin href-arvon ja vertaa sitä nykyisen sivun URL-osoitteeseen, joka alkaa verkkotunnuksen nimen jälkeen ja jatkuu eteenpäin niin monelle merkille kuin hrefissä on (samanlainen kuin startWith () -toiminto). Tämän ansiosta kaikki Tourin alisivut voivat myös merkitä Tourin aktiiviseksi osioksi, esimerkiksi /tour/section2.html. Kun haku löytyy, ylätason elementti - tässä tapauksessa
Tämä ratkaisu löytyy osoitteesta jsFiddle käytettäväksi ja se on upotettu myös alla. Tärkein asia, joka sinun on muutettava omien tarpeidesi mukaan, on .nav-valitsin JavaScriptin rivillä 9. Tätä tulisi muuttaa valitaksesi navigointielementin, jonka haluat käsitellä.
Huomaa, että jsFiddle-esimerkki ei toimi, koska et voi itse asiassa muuttaa URL-osoitetta tulosikkunassa, mutta voit helposti kopioida koodin HTML-tiedostoon sen testaamiseksi.
