jQuery는 클릭하면 링크를 강조합니다

StackOverflow https://stackoverflow.com/questions/813046

  •  03-07-2019
  •  | 
  •  

문제

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>

어쩌면 내 질문을 명확하게 설명 할 수 없을 수도 있습니다. 마지막으로 클릭 링크가 만들어졌습니다.

색상에서 빨간색과 다른 링크가 기본 색상으로 설정되었습니다.

도움이 되었습니까?

해결책 5 

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

다른 팁

CSS를 사용하는 것이 가능합니다. jQuery가 필요하지 않습니다.

가장 밝은 부분:

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

링크 색상 변경 :

a:active {
    color: #FF0000;
}

편집 : 의견에 응답 ... 링크가 브라우저를 다른 페이지로 지시하지 않으면 사용할 수 있습니다. 마이크 로빈슨의 대답 페이지를 떠나지 않고 색상을 기본 OnBlur로 변경하지 않고도 동일한 효과를 달성합니다.

지금 당장 jQuery가 없지만 이것이 그렇게해야한다고 생각하십시오. 'up'은 링크를 빨간색으로 만드는 클래스라고 가정합니다.

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

이것은 작동해야합니다 :

자바 스크립트 :

$(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)를 사용하는 것이 좋습니다.

나는 추천 할 것이다 http://plugins.jquery.com/project/color jQuery.color 플러그인. 모든 종류의 HTML 요소에서 색상을 애니메이션 할 수 있습니다.

자바 스크립트 :

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

CSS 의사 클래스를 사용하여 수행 할 수 있습니다 활동적인. 활성화 된 요소에 특별한 스타일을 추가합니다.

예를 들어이 작업을 수행 할 수 있습니다. 

a: active { color: red; }

조심하십시오. A : Active는 다음과 같은 a : 효과를 얻으려면 CSS 정의에 호버를 가져와야합니다 !!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top