geef class aan current url
ik probeer dmv jQuery scriptje een class toewijzen aan de url die nu actief is..
dus als ik op index.php sta dat die index.php de class current krijg..
ik heb dit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(function(){
var url = window.location.pathname
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('.invertedshiftdown a').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('current');
}
});
});
var url = window.location.pathname
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('.invertedshiftdown a').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('current');
}
});
});
maar het werkt niet,,, komt dit omdat ik op localhost werk?
ik krijg overigens in mijn console ( van chrome ) de volgende foutmelding:"Uncaught SyntaxError: Unexpected token ILLEGAL"
dus dat die laatste haakjes fout zijn... kijk ik ergens overheen?
Quote:
komt dit omdat ik op localhost werk?
Nee, JavaScript is client-side. De code wordt dus pas uitgevoerd in de browser, dus als er iets mis is gaat het fout in het browser. Maar aangezien jquery claimt IE6 en hoger aan te kunnen kan dat het niet zijn.
Je gebruikt alleen het RegExp object verkeerd. Die /\/$/ is een RegExp object. Je moet dus op regel 4 of dit doen:
Code (php)
1
2
3
4
5
2
3
4
5
regStr = new RegExp('\/$');
urlRegExp = url.replace(regStr, '');
// of dit:
urlRegExp = url.replace(/\/$/, '');
urlRegExp = url.replace(regStr, '');
// of dit:
urlRegExp = url.replace(/\/$/, '');
Verder is dit sneller dan het geen je nu op regel 8 hebt:
Code (php)
1
$('.invertedshiftdown').children('a').each(function() { ... });
En regel 8 is dan weer verkeerd. Je moet daarin hetzelfde toepassen als hierboven, dus:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
regStr = new RegExp('\/$');
urlRegExp = url.replace(regStr, '');
$('.invertedshiftdown').children('a').each(function() {
if( regStr.test($(this).attr('href')) ) { // zie de jQuery versie van this.href
$(this).addClass('current');
}
});
urlRegExp = url.replace(regStr, '');
$('.invertedshiftdown').children('a').each(function() {
if( regStr.test($(this).attr('href')) ) { // zie de jQuery versie van this.href
$(this).addClass('current');
}
});
Of je zult in dit script de eerste regel moeten verwijderen en regStr veranderen in /\/$/
Wel een beetje moeilijk verhaal geworden voor een jQuery beginner denk ik, even wat links ter ondersteuning:
- http://api.jquery.com/attr (voor het correct selecteren van het href attribuut)
- http://api.jquery.com/children
- https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp (voor de regexen in JS)
Gewijzigd op 01/03/2012 11:36:51 door Wouter J
Of, geef in een hidden input de naam of id op van de pagina zodat je het heel eenvoudig direct kunt doen met JQuery.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<input type="hidden" id="curr_page" value="#home">
<script>
$(document).ready(function(){
$($('#curr_page').val()).addClass('current');
});
</script>
<script>
$(document).ready(function(){
$($('#curr_page').val()).addClass('current');
});
</script>
Het laatste stukje JQuery heb ik even niet getest, maar zou volgens mij moeten werken.
@roel hoe zou ik het met php doen dan?
@wouterJ jou manier geprobeerd werkt niet.. ik heb die manier wat ik zelf gepost had op fiddle geprobeert en dat werkte wel
wat ook kan is handmatig zoals ik het nu heb de betreffende li item de class current meegeven maar is dat netjes en een goede manier?
de manier waarop ik nu de website heb wil ik overigens wel aanpassen qua manier van pagina ophalen ( met een switch o.i.d get(page))