login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Actief menu item

Offline MachielK - 30/11/2012 12:10 (laatste wijziging 30/11/2012 12:10)
Avatar van MachielKNieuw lid Ik maak gebruik van de volgende code om het menu-item in mijn menu de class actief te geven als de pagina actief is. Voorbeeld van menu:
{ Homepagina } { Informatie } { Inloggen }. Hierbij is informatie de actieve pagina.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function(){
  2.  
  3.     var url = window.location.pathname, 
  4.         urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
  5.  
  6.         $('.menu').each(function(){
  7.  
  8.             if(urlRegExp.test(this.href.replace(/\/$/,''))){
  9.                 $(this).addClass('actief');
  10.             }
  11.         });
  12.  
  13. });


Nu heb ik op de pagina informatie deel-pagina's, voorbeelden: site.nl/informatie/tijden of site.nl/informatie/prijzen.

Nu wil ik hebben dat alle paginas die na site.nl/informatie/ komen ook gezien worden als de pagina informatie en waardoor dus het menu-item { Informatie } actief word gemaakt.

Iemand een idee hoe ik dit in een paar regels toe kan voegen?

Machiel.

3 antwoorden

Gesponsorde links
Offline nick5556 - 30/11/2012 12:40
Avatar van nick5556 PHP beginner
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var curPage = url.split("/")[1];


Deze code zal de url(/informatie/tijden splitten op de /'es, dus je krijgt een array ["", "informatie", "tijden"], hierbij ga ik er van uit dat het actieve menu item altijd op nummer 1 van de array staat en die geven we dan ook terug.
Offline Martijn - 30/11/2012 20:03
Avatar van Martijn Crew PHP @nick je gaat een eind de goede richting in, maar als de pagina nu /een/twee/drie-diep is, gaat dat al niet meer op, op die manier kun je beter zo doen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var fullUrl = url.split("/");
  2. var curPage = fullUrl[ fullUrl.length-1 ]; // let op de min 1! 
  3. // Length zal 3 items geven, en je wilt dan niet key 3, maar 2, want een array begint met 0!


Ik neem aan dat mensen er op klikken? If so kun je ook dit doen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('.actief').removeClass('actief');
  2. $(this).addClass('actief');

Alleen moet je dan met bv PHP de eerste op actief zetten.
Offline Sitebase - 03/12/2012 09:39
Avatar van Sitebase PHP expert Er is ook een oplossing zodat je geen while of regex stuff nodig hebt.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var url_part = "/" + window.location.pathname.split('/')[1];
  2. $('[href$=' + url_part + ']').addClass('actief');


De eerste lijn neemt het pagina gedeelte uit de url zoals in het voorbeeld van nick.
De tweede lijn gaat op jouw pagina zoeken naar elementen die een href attribute hebben die url_part bevatten en geeft deze vervolgens een class "actief".

Als dit trouwens niet om een Ajax navigatie gaat zou ik aanraden dit soort dingen server side te doen met bijvoobeeld PHP.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s