jquery met en surbrillance le lien lorsque vous cliquez dessus

Question

Comment utiliser jQuery pour surligner le lien lorsque je clique dessus?

Par exemple, lorsque je clique sur le lien class1_1, je souhaite rendre ce lien rouge (ou d'une autre couleur).

Le code javascript ici:

<script type="text/javascript">
 $(function(){
  $("#menu li").each(function(){
     $(this).click(function(event){
       var ul=$(this).children("ul")
       var span = $(this).children("span")
       if(ul.html()!=null)
       {
          if(ul.css("display")=="none")
          {
            ul.css("display","block");
            span.addClass("up")
          }else
          {
            ul.css("display","none")
            span.removeClass("up")
          }
           event.stopPropagation();
       }else
       {
         event.stopPropagation();
       }
     });
  });
  return false;
 });
</script>

Le code html ici:

<ul id="menu">

<li class="title"><span>class1 </span>
<ul>
  <li><a href="">class1_1</a></li>
   <li><a href="">class1_2</a></li>
 </ul>
 </li>
<li class="title"><span>class2</span>
   <ul>
  <li><span>class2_1</span>
   <ul>
    <li><a href="">class2_1_1</a></li>
    <li><a href="">class2_1_1</a></li>
  </ul>
  </li>
 </ul>
</li>
</ul>

peut-être que je ne peux pas expliquer ma question clairement, je veux dire, est le dernier lien onclick le rendre

couleur en rouge et un autre lien défini à sa couleur par défaut

Answer 1

<script type = "text/javascript" >
$(function() {
    $("#menu li").each(function() {
        $(this).click(function(event) {

            $("#menu li").removeClass("high");
            $(this).addClass("high");

            var ul = $(this).children("ul")
            var span = $(this).children("span")
            if (ul.html() != null) {
                if (ul.css("display") == "none") {
                    ul.css("display", "block");
                    span.addClass("up")
                } else {
                    ul.css("display", "none") span.removeClass("up")
                }
                event.stopPropagation();
            } else {
                event.stopPropagation();
            }
        });
    });
    return false;
});
</script>


<style>
.high{color:red}
</style> 

Answer 2

C'est possible avec CSS, aucun jQuery n'est requis:

Mettez en surbrillance:

a:active {
    background-color: #FF0000;
}

Changer la couleur du lien:

a:active {
    color: #FF0000;
}

Modifier: en réponse à votre commentaire ... Si vos liens ne dirigent pas le navigateur vers une autre page, vous pouvez utiliser Réponse de Mike Robinson pour obtenir le même effet sans quitter la page et sans redéfinir la couleur sur le flou par défaut.

Answer 3

Je pense que cela devrait suffire, même si je n’ai pas jQuery sous la main pour le moment. Suppose que "up" est une classe qui rend votre lien rouge:

$("ul#menu a").click(function(){
 $(this).addClass('up');
});

Answer 4

Cela devrait fonctionner:

Javascript:

$(function(){
    $('.class1').click(function() {
        $(this).toggleClass('active1');
    });
});

CSS:

a.class1 { color: red; }
a.active1 { color: blue; }

HTML:

<a href="#" class="class1">some text</a>

Il est préférable d’utiliser toggleClass (2 in 1) au lieu de addClass / removeClass.

Answer 5

Je recommanderais le http://plugins.jquery.com/project/color . plugin jquery.color. Cela vous permettra d’animer des couleurs sur toutes sortes d’éléments HTML.

Answer 6

Javascript:

$('.link').click(function() {
    if (!$(this).hasClass('hi')) {
        // If this link is not already highlighted, highlight it and make
        // sure other links of class .link are not highlighted.
        $('.hi').removeClass('hi');
        $(this).addClass('hi');
    }
});

css:

a.hi { color: red; }

html:

<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>

Answer 7

Vous pouvez le faire en utilisant la pseudo-classe CSS active . Il ajoute un style spécial à un élément activé.

Par exemple, vous pouvez faire ceci:

a: active { color: red; }

Attention, a: active DOIT venir après un: survol de la définition CSS pour être efficace !!