JQuery - Modification de la couleur du lien actif

J'ai une petite page avec deux liens qui chargent le contenu dans un div en fonction du lien sélectionné. Question est assez évidente, je voudrais mettre en évidence le lien de contenu actuel avec une couleur différente et basculer la couleur en fonction du lien qui est pressé.JQuery - Modification de la couleur du lien actif

Je suis tenté de le faire avec ma fonction actuelle à l'aide de ce qui suit mais il ne fonctionne pas:

question assez simplement si je suis évidemment d'être stupide. Toute aide serait très appréciée.

Merci!

<script type="text/javascript"> 
    function loadContent(id) { 
     $("#video").load("streams.php?o="+id+""); 
     $('active').removeClass('active'); 
     $(this).addClass('active'); 
    } 
</script>

code complet:

<html> 

<head> 

    <title>beam</title> 

    <script type="text/javascript" src="swfobject.js"></script> 
    <script type="text/javascript"> 
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); 
    </script> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 
     function loadContent(id) { 
      $("#video").load("streams.php?o="+id+""); 
      $('active').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    </script> 

    <style> 

    * { margin:0; padding:0; } 
    img{ border-style:none; } 

    html { height: 100%; } 
    body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;} 

    a { 
    color:#fff; 
    text-decoration: none; 
    } 

    .active { 
    color:#00d2ff; 
    } 

    .container { 
    position:absolute; 
    background:url("images/video-bg.jpg") no-repeat; 
    width:520px; 
    height:576px; 
    } 

    #video { 
    position:relative; 
    background:#000; 
    top:275px; 
    left:55px; 
    width:400px; 
    height:222px; 
    } 

    #stream-controller { 
    position:relative; 
    left:55px; 
    top:285px; 
    width:200px; 
    } 

    </style> 

</head> 

<body onLoad="loadContent(1);"> 

    <div id="fb-root"></div> 

    <div class="container"> 

     <div id="video"> 

      &nbsp; 

     </div> 

     <div id="stream-controller"> 
      <p><a href="javascript:loadContent(1);" class="active">STREAM 1</a> | <a href="javascript:loadContent(2);">STREAM 2</a></p> 
     </div> 

    </div> 

</body> 

</html>

Source

2011-05-19 digitalpencil

Une question est votre sélection pour le lien actif:

$('active').removeClass('active');

devrait être :

$('.active').removeClass('active');

L'autre problème, même si je n'ai pas testé d ceci encore, est que je ne crois pas en utilisant href="javascript:loadContent(1);" va définir la valeur de this dans la fonction à l'élément a approprié. Si vous travaillez avec jQuery, vous feriez mieux de régler le gestionnaire avec jQuery et passer la variable à travers l'étiquette, quelque chose comme:

<a class="stream active" href="streams.php?o=1">STREAM 1</a>

avec le code jQuery:

$(function() { 
    $('a.stream').click(function(e) { 
     var $this = $(this); 
     $("#video").load($this.attr('href')); 
     $('.active').removeClass('active'); 
     $this.addClass('active'); 

     // prevent default link click 
     e.preventDefault(); 
    }) 
});

Source

2011-05-19 16:31:47 nrabinowitz

Merci, c'est génial. J'ai dû changer l'attribut en 'link' et l'utiliser et mettre href à # donc il n'a pas essayé de charger la page streams.php directement, mais c'est parfait. Merci encore. – digitalpencil

Désolé, cela aurait dû inclure la ligne '.preventDefault()' que j'ai ajoutée - cela arrêtera le comportement de clic de lien par défaut, permettant à l'implémentation 'href' d'origine de fonctionner (je pense que c'est un peu plus sémantique point de vue, et pourrait être mieux pour l'accessibilité). – nrabinowitz

Pourquoi ne faites-vous pas tout simplement en CSS?

a { 
    color:#fff; 
    text-decoration: none; 
} 

a:active { 
    color:#00d2ff; 
}

édition une partie de ma solution: ninja'd et un bien meilleur de nrabinowitz

Source

2011-05-19 16:30:53 Kraz

Parce qu'ils veulent mettre en évidence le lien pointant vers le contenu actif, et non le lien en cours de clic. – Quentin

Frigging vrai, a répondu trop rapidement. Sauf, ça marche pour ie (8). – Kraz

Pour basculer la classe "active" sur le lien pressé, je ferais ceci:

var $a = $("a"); 

$a.click(function() { 

    $a.removeClass("active"); 
    $(this).addClass("active"); 

});

Source

2011-05-19 16:36:26

JQuery - Modification de la couleur du lien actif

Répondre

Questions connexes