jquery 클릭시 링크 강조 표시

Question

jquery를 사용하여 링크를 강조 표시하려면 어떻게해야합니까?

예를 들어, class1_1 링크를 클릭하면이 링크를 빨간색 (또는 다른 색상)으로 만들고 싶습니다. 여기

자바 스크립트 코드 :

는

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

이,주의 A : 후 와야 활성 : 효과적으로하기 위해 CSS 정의에 가져가!

Answer 6

이 작동합니다 :

자바 스크립트 :

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

CSS :

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

HTML :

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

그것의 더 나은 폴리스 addClass/removeClass 대신 toggleClass (2 in 1)를 사용하십시오.

Answer 7

자바 스크립트 :

$('.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>