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):
- Est
<ul onclick="JavaScript:changeCurrent();>
où j'ai besoin d'avoir l'événement? - Quel est le JavaScript pour rendre le changement possible?
- Comment puis-je la cause de la première option à définir en tant que courant par défaut?
- 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'
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
Vous devez vous connecter pour publier un commentaire.
Depuis que vous avez spécifié que vous vouliez un non-jQuery réponse, voici une fonction qui permet de basculer de façon appropriée:
Ajouter un onclick gestionnaire pour chaque LI (
onclick="toggleNavSelected(this);"
) ou d'exécuter les opérations suivantes après, le menu est chargé:Démo: http://jsfiddle.net/bWY7P/2/
(note: Le JSFiddle script a une petite différence; il ajoute un
return false;
à la onclick fonction de sorte que vous pouvez jouer avec elle sans que les liens en fait la suite de l'attribut HREF. N'utilisez pas cette ligne dans votre code en direct)Explication:
La fonction ressemble à chaque
LI
élément à l'intérieur de la#nav
élément.Si cet élément est l'élément passé à la fonction, puis il ajoute la classe
.current
.Sinon, il supprime la classe
.current
(si présent).La deuxième partie se lie d'une fonction à l'événement onclick de chaque
a
élément qui appelle latoggleNavSelected()
fonction et passe son élément parent (leli
) comme argument.Eh. Il n'est ni nécessaire pour Benjamin. J'ai seulement ajouté à la JSFiddle pour répondre à cet environnement particulier. La Perfection n'est pas nécessaire d'optimiser et d'adapter l'environnement de démonstration, tant que c'est expliqué.
Hey, merci pour cet. Je voterais vous mais j'ai été informé par un cocher qu'une telle loi exigerait 15 réputation que je n'ai pas tellement juste merci. Si je reçois que 15 je vais jusqu'vote. Souhaitons encore il y a un moyen de bloquer l'actif, l'état du lien de l'onglet en cours, mais au moins ça fonctionne maintenant. Merci infiniment.
modifié la réponse. Maintenant, quand il ajoute
.current
à unli
, il ajoute également unereturn false;
à laonclick
fonction pour le lien à l'intérieur. (Et ça enlève lors de la suppression de.current
) n'hésitez pas à prendre un regard sur les différences pour voir ce que vous auriez besoin d'ajouter.OriginalL'auteur joequincy
1) si vous souhaitez modifier la classe sélectionnée lorsque vous cliquez sur un élément, mettez le onclick dans la batterie au lithium d'élément
2) à l'aide de jquery serait très facile ici, tout ce que vous avez à faire est d'importer le fichier jquery avec la
<script>
tag et vous êtes prêt! Par exemple, vous pourriez faireonclick="changeClass(this);"
sur le<li>
tag et normales dans un fichier JavaScript ou dans une balise script:Remplacer le 'courant' avec le nom de la classe que vous souhaitez utiliser
3) il devrait déjà être défini comme courant
4) utiliser le :visité le sélecteur CSS pour changer de quelle couleur sont les liens suivis look comme par exemple:
Mmh, je mettrais le gestionnaire d'événements pour le lien, comme il l'élément qui est sélectionné par l'utilisateur. Vous pouvez toujours obtenir l'élément de la liste en jQuery avec
$( this ).parent( 'li' )
.Juste point 🙂 je pense que ce serait mieux que nos méthodes..
OriginalL'auteur Alexander North
Tout d'abord, vous devez définir le gestionnaire d'événement à partir d'un script séparé, non pas d'une
onclick
attribut. Vous ne répétez pas votre code de cette façon et ont tout dans un seul endroit. Le HTML est aussi beaucoup plus propre.À l'aide de jQuery il serait aussi facile que de:
Vous pouvez aussi le faire dans la plaine du JS, mais l'utilisation de certaines bibliothèque vous tient hors de l'ennui de l'incompatibilités entre navigateurs.
OriginalL'auteur feeela