jquery markieren Sie den Link, wenn darauf geklickt

Question

Wie kann ich jQuery verwenden Sie den Link zu markieren, wenn ich darauf klicke?

Zum Beispiel, wenn ich auf den Link klicken class1_1, ich möchte diesen Link rot machen (oder eine andere Farbe).

Der JavaScript-Code hier:

<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>

Der HTML-Code hier:

<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>

vielleicht kann ich nicht erklären, meine Frage klar, ich meine der letzte Onclick Link ist es machen

Farbe rot und weitere Links auf es Standardfarbe

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

Es ist möglich, mit Hilfe von CSS, jQuery keine erforderlich:

Highlight:

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

Link Ändern Farbe:

a:active {
    color: #FF0000;
}

Edit: Als Reaktion auf Ihren Kommentar ... Wenn Sie Ihre Links nicht den Browser auf eine andere Seite zu leiten sind, können Sie Mike Robinson Antwort den gleichen Effekt, ohne sich die Seite und ohne Änderung der Farbe wieder zu erreichen. auf die Standard onblur

Answer 3

Ich glaube, das sollte es tun, obwohl ich jetzt nicht jquery zur Hand haben. Geht davon aus ‚up‘ ist eine Klasse, die Ihren Link rot macht:

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

Answer 4

Das sollte funktionieren:

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>

Es ist besser zu nutzen toggleClass (2 in 1) anstelle von addClass / removeClass.

Answer 5

Ich würde die http://plugins.jquery.com/project/color jquery.color Plugin. Es erlaubt Ihnen, Farbe auf alle Arten von HTML-Elemente zu animieren.

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

Sie können es tun, um die CSS-Pseudoklasse mit Aktiv . Es fügt besonderen Stil an ein aktiviertes Element.

Zum Beispiel können Sie dies tun:

a: active { color: red; }

Seien Sie vorsichtig, ein: aktiv, nachdem ein MUSS kommen: schweben in der CSS-Definition, um wirksam zu sein !!