Comment reconnaître la page courante avec jQuery?

**Nighthawk** · 25/06/2015, 09h01

Bonjour.

Si mon titre n'es pas clair voilà un peu de contexte : je souhaite réaliser un menu déroulant pour mon site web (un truc assez classique quoi). Cette partie-là c'est ok, ça marche !
Ce que je voudrais en plus c'est mettre en valeur la page visité sur mon menu. En gros, je veux que lorsque je visite la page 'accueil', le texte accueil de mon menu soit en vert et encadré. Du coup je me suis dit que j'allais comparer l'url courante avec les liens de mon menu et, si il y a occurrence, modifier le css pour que la page visitée soit indiquée dans mon menu.

Pour rentrer dans le concret, voilà quelque morceaux de mon code :
html :`

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Bidouille</title>
		<link rel="stylesheet" type="text/css" href="Bidouille.css">
	</head>
	<body>
		<div class="j-nav-variant-nested">
			<ul class="cc-nav-level-0 j-nav-level-0">
				<li id="cc-nav-view-2074207824" class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current">
					<a href="file:///Users/interstice/Desktop/Bidouille/Bidouille1.html" data-link-title="Accueil" class="cc-nav-current j-nav-current jmd-nav__link--current"><span>Accueil</span></a>
				</li>
				<li id="cc-nav-view-2074207924" class="jmd-nav__list-item-0">
					<a href="file:///Users/interstice/Desktop/Bidouille/Bidouille2.html" data-link-title="Compétences"><span>Compétences</span></a>
				</li>
				<li id="cc-nav-view-2096493224" class="jmd-nav__list-item-0 j-nav-has-children cc-nav-current j-nav-current jmd-nav__item--current">
					<a href=""><span>Références</span></a>
					<ul class="cc-nav-level-1 j-nav-level-1">
						<li id="cc-nav-view-2127660024" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille3.html" data-link-title="Ain">Ain</a></li>
						<li id="cc-nav-view-2127660824" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille4.html" data-link-title="Ardèche">Ardèche</a></li>
						<li id="cc-nav-view-2127660524" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille5.html" data-link-title="Drôme">Drôme</a></li>
						<li id="cc-nav-view-2127660124" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille6.html" data-link-title="Isère">Isère</a></li>
						<li id="cc-nav-view-2127661124" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille7.html" data-link-title="Loire">Loire</a></li>
						<li id="cc-nav-view-2127661224" class="jmd-nav__list-item-1"><a href="file:///Users/interstice/Desktop/Bidouille/Bidouille8.html" data-link-title="Rhône">Rhône</a></li>
					</ul>
				</li>
				<li id="cc-nav-view-2074208024" class="jmd-nav__list-item-0">
					<a href="file:///Users/interstice/Desktop/Bidouille/Bidouille9.html" data-link-title="L'Equipe"><span>L'Equipe</span></a>
				</li>
				<li id="cc-nav-view-2186277124" class="jmd-nav__list-item-0">
					<a href="file:///Users/interstice/Desktop/Bidouille/BidouilleX.html" data-link-title="Contact"><span>Contact</span></a>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="jquery-214min.js"></script>
		<script type="text/javascript" src="Bidouille.js"></script>
	</body>
</html>

et mon js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function(){
 
/* On a d'abord le code qui permet l'accordéon dans mon menu */
 
  $('.jmd-nav__list-item-0:has(.cc-nav-level-1)').addClass("has-sub");
 
  $('.jmd-nav__list-item-0 > a').click(function(){
 
    var checkElement = $(this).next();
 
    $('.jmd-nav__list-item-0').removeClass('active');
    $(this).closest('.jmd-nav__list-item-0').addClass('active');
 
    if((checkElement.is('.cc-nav-level-1')) && (checkElement.is(':visible'))) {
      $(this).closest('.jmd-nav__list-item-0').removeClass('active');
      checkElement.slideUp('normal');
    }
 
    if((checkElement.is('.cc-nav-level-1')) && (!checkElement.is(':visible'))) {
      $('.cc-nav-level-1:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
 
    if(checkElement.is('.cc-nav-level-1')) {
      return false;
    } else {
      return true;
    }
  });
 
/* Et ça c'est ma tentative pour vérifier mon url */
 
  var verifyLink = $('a').attr('href');
  var verifyPage = $(location).attr('href');
  if (verifyLink == verifyPage) {
    $('a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  else {
    return false;
  }
 
});

Voilà, je vous remercie d'avance pour votre aide.

Invité · 25/06/2015, 09h27

Bonjour,
et tu n'as pas pensé à faire d'abord une recherche : "jquery récupérer url courante"

On trouve la réponse en 5 secondes chrono.

**Nighthawk** · 25/06/2015, 09h38

Précisons un peu la demande.
Récupérer l'url courante n'est pas un problème. Ca fonctionne. Le problème c'est de la comparer avec chacune des url de mon menu (en sachant que je ne peux pas modifier mon html) et de trouver l'élément actuellement visité.

Si non, bien sûr que j'ai recherché avant ! Et pas seulement ici.

EDIT : J'ai trouvé une solution qui marche. C'est peut être pas la plus optimisées, mais ça fonctionne. Si vous avez mieux je suis preneur, en attendant, voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
$(document).ready(function(){
 
  var verifyLink0 = $('#cc-nav-view-2074207824 > a').attr('href');
  var verifyLink1 = $('#cc-nav-view-2074207924 > a').attr('href');
  var verifyLink2 = $('#cc-nav-view-2127660024 > a').attr('href');
  var verifyLink3 = $('#cc-nav-view-2127660824 > a').attr('href');
  var verifyLink4 = $('#cc-nav-view-2127660524 > a').attr('href');
  var verifyLink5 = $('#cc-nav-view-2127660124 > a').attr('href');
  var verifyLink6 = $('#cc-nav-view-2127661124 > a').attr('href');
  var verifyLink7 = $('#cc-nav-view-2127661224 > a').attr('href');
  var verifyLink8 = $('#cc-nav-view-2074208024 > a').attr('href');
  var verifyLink9 = $('#cc-nav-view-2186277124 > a').attr('href');
  var verifyPage = $(location).attr('pathname');
 
  if (verifyLink0 == verifyPage) {
    $('#cc-nav-view-2074207824 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink1 == verifyPage) {
    $('#cc-nav-view-2074207924 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink2 == verifyPage) {
    $('#cc-nav-view-2127660024 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink3 == verifyPage) {
    $('#cc-nav-view-2127660824 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink4 == verifyPage) {
    $('#cc-nav-view-2127660524 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink5 == verifyPage) {
    $('#cc-nav-view-2127660124 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink6 == verifyPage) {
    $('#cc-nav-view-2127661124 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink7 == verifyPage) {
    $('#cc-nav-view-2127661224 > a, #cc-nav-view-2096493224 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink8 == verifyPage) {
    $('#cc-nav-view-2074208024 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  if (verifyLink9 == verifyPage) {
    $('#cc-nav-view-2186277124 > a').css({
      border : '1px solid #ccc',
      color : '#9dae3f'
    });
  }
  else {
    return false;
  }
 
});

Et voilà !!!!

Comment reconnaître la page courante avec jQuery?

JavaScript

Discussions similaires

Partager

Partager