jqueryをクリックするとリンクが強調表示されます

Question

jqueryをクリックしてリンクを強調表示するにはどうすればよいですか？

たとえば、class1_1のリンクをクリックすると、このリンクを赤色（または別の色）にしたいと考えています。

ここjavascriptのコード：

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

ここにhtmlコード：

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

多分私は私の質問は明らかに、私は意味、最後のonclickのリンクはそれ

作りで説明することはできません

赤と他のリンクをデフォルトの色に設定する

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

これはすべきだと思いますそれは、私はすぐにjqueryを持っていないが。 「をアップ」を前提とあなたのリンクが赤になり、クラスである：

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

Answer 3

私はhttp://plugins.jquery.com/project/color jquery.colorプラグインをお勧めします。あらゆる種類のhtml要素で色をアニメートできます。

Answer 4

それはCSSを使用して可能ですが、何のjQueryは必要ありません：

ハイライト：

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

変更リンク色：

a:active { 
    color: #FF0000; 
} 

編集：あなたのコメントへの対応...あなたのリンクがある場合ブラウザを別のページに誘導しない場合は、Mike Robinson's answerを使用して、ページを離れずに、デフォルトのonblurに戻すことなく同じ効果を達成することができます。

Answer 5

CSS疑似クラスアクティブを使用してこれを行うことができます。これは、活性化された要素に特殊なスタイルを追加します。

たとえば、あなたがこれを行うことができます：

a: active { color: red; } 

は、注意してください：の後に来なければならないアクティブ：効果的にするために、CSSの定義でホバー！

Answer 6

これは動作するはずです：

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> 

その優れたUへaddClass/removeClassの代わりにtoggleClass（2in1）を使用します。

Answer 7

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>