jQuery : Appliquer une classe à un élément cliqué

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par John Smith, 7 Mai 2011.

  1. John Smith
    John Smith WRInaute occasionnel
    Inscrit:
    4 Avril 2007
    Messages:
    341
    J'aime reçus:
    8
    Bonjour à tous,

    Après une longue recherche infructueuse, je me tourne encore vers vous pour résoudre un petit désagrément qui commence à me courir.

    Voici un bout de code :

    Code:
    <ul class="menu-vertical">
                <li onclick="MenuChoix('informations');">Enregistrement</li>
                <li  onclick="MenuChoix('profil');">Profil</li>
                ...
            </ul>
    Et voici pour la fonction :

    Code:
    function MenuChoix(id)
    	{
    		$(".menu-vertical > li").removeClass("current"); // On supprime toutes les classes current des li
    		$(this).addClass("current");  // On applique la classe current à la li cliqué <--- Ca ne marche pas !!!
                                    ...
    	}
    Le id concerne une div situé dans la page qui doit apparaitre ou disparaitre mais le problème n'est pas là. En fait, je voudrais appliquer une classe à mon élément cliqué mais j'ai l'impression que $(this) ne prend pas mon élément li.

    Pourriez-vous m'aider ? Merci.
     
  2. MarvinLeRouge
    MarvinLeRouge WRInaute impliqué
    Inscrit:
    1 Septembre 2004
    Messages:
    515
    J'aime reçus:
    0
    Salut,

    Je pense que tu t'y prends mal, ça donnerait plutôt un truc du style
    Code:
    <ul class="menu-vertical">
      <li class="toggler" id='informations-toggler">Enregistrement</li>
      <li class="toggler" id="profil-toggler">Profil</li>
    ...
    </ul>
    Code:
    $(function()
    {
      $(".toggler").click(function(e)
      {
        e.preventDefault();
        var reg=new RegExp("-toggler", "g");
    
        var cible = $(".current").attr("id");
        cible = cible.replace(reg, "");
        $("#" + cible).hide().removeClass("current");
    
        cible = $(this).attr("id");
        cible = cible.replace(reg, "");
        $("#" + cible).show().addClass("current");
      });
    });
    
     
  3. John Smith
    John Smith WRInaute occasionnel
    Inscrit:
    4 Avril 2007
    Messages:
    341
    J'aime reçus:
    8
    Bonsoir,

    Merci pour cette réponse mais ça n'a pas l'air de marcher. Je vais essayer de creuser un peu... Avant d'aller me coucher !
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 194
    J'aime reçus:
    333
    C'est plus simple que ça :wink:

    http://jsbin.com/uvumo6/edit
    PHP:
    <span class="syntaxhtml"><span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><!</span><span class="syntaxdefault">DOCTYPE html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">head</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">script class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"jsbin"</span><span class="syntaxdefault"> src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"</span><span class="syntaxkeyword">></span><span class="syntaxdefault"></script><br /></span><meta charset=utf-/><br /><title>JS Bin</title><br />  <script type="text/javascript"><br />  $(document).ready(function(){<br />    $('.menu-vertical > li').click(function() {<br />      $(this).toggleClass('current');<br />    });<br />  });<br /></script><br /><style><br />  .current {color:#FF0000;}  <br /></style><br /></head><br /><body><br /><ul class="menu-vertical"><br />  <li>Enregistrement</li><br />  <li>Profil</li><br /></ul><br /></body><br /></html><br /></span>
     
  5. John Smith
    John Smith WRInaute occasionnel
    Inscrit:
    4 Avril 2007
    Messages:
    341
    J'aime reçus:
    8
    Merci beaucoup, le résultat est un mix de tout ça :

    Code:
    		$('.menu-vertical > li').click(function() {
    			var reg=new RegExp("-toggler", "g");
    			
    			id = $(this).attr("id");
    			id = id.replace(reg, ""); /* Ca va me servir à récupérer l'id de la div que je veux faire apparaitre plus loin dans ma page */
    			
    			$('.menu-vertical > li').removeClass("current"); /* On efface les current */
    			$(this).toggleClass('current'); /* La li cliquée devient current */
    
    /* Ici je me sers de l'id que j'ai reconstituée pour faire apparaitre la div */
    		});
    Merci à tous !
     
Chargement...
Similar Threads - jQuery Appliquer classe Forum Date
JQuery ui accordeon et lazy image Développement d'un site Web ou d'une appli mobile 27 Mars 2020
Aligner des checkboxradio jQuery Développement d'un site Web ou d'une appli mobile 7 Mars 2020
Accordion jquery : onclick fermer la section ouverte Développement d'un site Web ou d'une appli mobile 13 Février 2020
Jquery : CDN Google ou CDN Jquery Administration d'un site Web 1 Février 2019
Utilisation de load (Jquery) sans impacter le SEO Développement d'un site Web ou d'une appli mobile 4 Août 2018
diaporama (jquery) façon facebook Développement d'un site Web ou d'une appli mobile 2 Août 2018
Slider range jquery + keyup fonction Développement d'un site Web ou d'une appli mobile 26 Février 2018
se passer d'un SetTimeout dans Jquery Développement d'un site Web ou d'une appli mobile 23 Février 2017
Double JQUERY.js Débuter en référencement 18 Décembre 2016
Compresser le Jquery et le CSS ? Problèmes de référencement spécifiques à vos sites 26 Septembre 2016