Discussion :

[Daii619]

Salutation à tous...

Cela fait maintenant 2 semaines que je me suis initié à la programmation web.
J'ai appris et maîtrisé l'HTML-5, je suis intermédiaire en CSS-3, débutant en PHP aussi bien qu'en JavaScript.
Grâce au Youtuber "TheNewBoston", et aux autres sites Tutos, je me considère comme un p**ain de chanceux.

Et maintenant avançons dans le vive du sujet... :

Je fais actuellement face à un problème, des plus délicats avec ma page Web (temporaire et en construction), sur Google Drive: "http://gdriv.es/the-black-cat-619".
Je n'arrive pas à gérer ma barre de navigation pour que la page active, reste active.

La méthode classique avec [class=""] et [id=""] n'est plus envisageable car les différentes pages se chargent à l'intérieur de la première.

Auriez-vous donc moyen de m'aider à corriger mon code incomplet ?

HTML

Code html :

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

1
2
<li class="navUrl" onclick="changeStyle()"><a href="pages/home.html" target="iFrame">Home</a></li>
<li class="navUrl"  onclick="changeStyle()"><a href="pages/creations.html" target="iFrame">Creations</a></li>

JavaScript

Code :

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

1
2
3
function changeStyle() {
	var x = document.getElementById('navUrl');
	x.style = 'background:-o-linear-gradient(bottom, #0C90FF 10%, #00CCFF 100%)';

[SylvainPV]

Si navUrl est une classe et non un identifiant, pourquoi utiliser document.getElementById ?
Voici une correction possible.

Code html :

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

1
2
<li class="navUrl" onclick="changeStyle(this)"><a href="pages/home.html" target="iFrame">Home</a></li>
<li class="navUrl"  onclick="changeStyle(this)"><a href="pages/creations.html" target="iFrame">Creations</a></li>

Code js :

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

1
2
3
function changeStyle(x) {
   x.style = 'background:-o-linear-gradient(bottom, #0C90FF 10%, #00CCFF 100%)';
}

Il faudra aussi penser à retirer l'état actif des <li> précédentes.

[Daii619]

Merci SylvainPV pour l'aide que tu essaies de me fournir.

Mais heureusement, j'ai trouvé par moi-même la solution à mon problème.

JAVASCRIPT

Code :

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

1
2
3
4
5
6
$( document ).ready( function(){
	$('nav').on('click','.navUrl',function () {
		$('.navUrl').removeClass('navUrlSelect');
		$(this).addClass('navUrlSelect');
	});
});

CSS

Code css :

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

1
2
3
4
5
6
nav .navUrl	{
	color:#2C2C2C;
}
nav .navUrlSelect	{
	color:#C2C2C2;
}

HTML

Code html :

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

1
2
3
4
5
6
<nav>
<ul>
<li class="navUrl"><a href="pages/home.html" target="iFrame">Home</a></li>
<li class="navUrl"><a href="pages/other_page.html" target="iFrame">Other_Page</a></li>
</ul>
</nav>

Entre autres, lorsque l'on clique sur la liste, on passe d'un style CSS à un autre...
Et en cliquant sur une autre liste, la précédente retourne à son état d'origine.