Kuriant svetaines ši problema vėl ir vėl atsiranda: kaip nustatyti dabartinę vartotojo vietą, kad galėčiau paryškinti aktyvų skyrių naršymo meniu? Tai toks pagrindinis poreikis, tačiau sprendimas, atrodo, yra iš naujo sugalvotas kiekvienam naujam pastatui.
Dinamiškai sprendžiant šią problemą, galite eiti dviem pagrindiniais maršrutais - serverio ir kliento. Tai išspręsti serverio pusėje yra malonu, nes prašomame puslapyje turėsite geresnę tvarką, tačiau tai ne visada praktiška. Šiek tiek suplanavus, tai yra gana paprasta tai išspręsti kliento pusėje naudojant „JavaScript“ (ir pasirinktinai „jQuery“).
Tarkime, kad antraštėje yra pagrindinis naršymo meniu ir norite pakeisti dabartinio puslapio, kuriame esate, fono spalvą.
Geriausia, kai spustelėsite „Turas“ ir pateksite į „Turo“ puslapį, norėtumėte, kad meniu atspindėtų jūsų dabartinę vietą.
Norėdami tai padaryti naudodami „jQuery“, palyginsime kiekvienos meniu nuorodos „href“ atributą su dabartiniu naršyklės URL ir bandysime rasti atitikimą. Jei bus rasta atitiktis, nustatysime šį elementą aktyvų, pridėdami klasę prie
Grynas šio labai paprasto pavyzdžio rezultatas atrodo taip
Kiekvieną puslapį įkeliant, šis scenarijus vykdo ir lygina kiekvieno meniu nuorodos href su dabartiniu puslapio URL, prasidedančiu po domeno pavadinimo ir tęsiasi tiek simbolių, kiek yra href (panašiai kaip funkcija startWith ()). Tai leidžia bet kokiems „Tour“ sub-puslapiams taip pat pažymėti „Tour“ kaip aktyvų skyrių, pvz., /Tour/section2.html. Kai randama atitiktis, pagrindinis elementas - šiuo atveju an
Šį sprendimą rasite naudojimui svetainėje „jsFiddle“ ir jis taip pat įdėtas žemiau. Pagrindinis dalykas, kurį turėsite pakeisti savo poreikiams, yra „.nav“ parinkiklis 9 „JavaScript“ eilutėje. Tai turėtų būti pakeista, kad būtų pasirinktas norimas apdoroti navigacijos elementas.
Atminkite, kad „jsFiddle“ pavyzdys neveiks, nes iš tikrųjų negalite pakeisti URL rezultatų lange, tačiau galite lengvai nukopijuoti kodą į HTML failą, kad jį išbandytumėte.
