L'utilisation de JavaScript pour changer la classe d'un <li>

J'ai le code suivant:

<div id="nav">
  <ul>
    <li id="tabOne" class="first current"><a href="./CS1.html" target="SheetView">Page One</a></li>
    <li id="tabTwo"><a href="./CS2.html" target="SheetView">Page Two</a></li>
    <li id="tabThree"><a href="./CS3.html" target="SheetView">Page Three</li>
    <li id="tabFour"><a href="./CS4.html" target="SheetView">Page Four</a></li>
    <li id="tabFive"><a href="./CS5.html" target="SheetView">Page Five</a></li>
    <li id="tabSix"><a href="./CS6.html" target="SheetView">Page Six</a></li>
  </ul>

Charge la page sélectionnée dans une iframe nommé "SheetView." Ce dont j'ai besoin pour faire est d'utiliser JavaScript pour modifier la classe lorsqu'une option qui n'est pas actuellement sélectionné est cliqué. Je dois dire que j'ai la classe en cours déjà en place dans mon CSS. Je n'ai juste aucun moyen de le déclencher.

J'ai pensé à l'ajout d'un onlick événement à la <UL> là-haut et de l'appel de onclick="Javascript:changeCurrent();" mais il y a le problème (quatre en fait):

  1. Est <ul onclick="JavaScript:changeCurrent();> où j'ai besoin d'avoir l'événement?
  2. Quel est le JavaScript pour rendre le changement possible?
  3. Comment puis-je la cause de la première option à définir en tant que courant par défaut?
  4. Est-il un moyen de garder l'option actuellement sélectionnée d'être un lien actif?

J'ai trouvé quelques exemples, mais je n'arrivais pas à les adapter à travailler pour moi. Toute aide serait appréciée.

Homegrown seulement, ou jQuery est d'accord?
Je n'ai aucune idée de ce que jQuery est donc je suppose que le bâton de fait maison, s'il vous plaît.
Pas nécessairement une approbation, mais pour résumer: jquery.
Ce n' changeCurrent() faire?

OriginalL'auteur Benjamin | 2012-12-08