Barre de Naviguation pour pages en iFrame

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:

---

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:

---

1 2 3

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

---

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

Code:

---

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:

---

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.

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:

---

1 2 3 4 5 6

$( document ).ready( function(){ $('nav').on('click','.navUrl',function () { $('.navUrl').removeClass('navUrlSelect'); $(this).addClass('navUrlSelect'); }); });

---

CSS

Code:

---

1 2 3 4 5 6

nav .navUrl { color:#2C2C2C; } nav .navUrlSelect { color:#C2C2C2; }

---

HTML

Code:

---

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.