2011-09-06 12 views
0

다음 CSS 및 jquery 코드를 사용하여 ul의 텍스트 클릭시 텍스트 색상을 변경하려고합니다. 현재 텍스트 색상이 # d49a9a 인 경우 다시 # c2c0c0으로 변경하고 그 반대의 경우도 마찬가지입니다.jquery 클릭시 텍스트 색상 변경

.navContainer ul{ 
    left: 10px; 
    top: 20px; 
    position: absolute; 
    color: #c2c0c0; 
    font-family: 'Terminal Dosis'; 
    font-weight: 200; 
    font-size: 20pt; 
    list-style-type: none; 
    line-height: 50px; 
} 
.navContainer a { 
    text-decoration: none; 
    color: #c2c0c0; 
} 
.navContainer { 
    left: 150px; 
    top: 150px; 
    position: absolute; 
} 

편집 --- 여기 내 HTML입니다

<head> 
...some code 
<script type="text/javascript"> 
      $("#navContainer li").click(function() { 
       $("#navContainer li").css("color", "#d49a9a"); 
       $(this).css("color", "#c2c0c0"); 
      }); 
      </script> 
</head> 
<div class="navContainer"> 
      <ul> 
       <li class="navText">Work</li> 
       <li class="navText"><a href="#">Blog</a></li> 
       <li class="navText">About</li> 
       <li class="navText">Contact</li> 
      </ul> 
     </div> 

내가 뭘 잘못 말해 줄 수주십시오.

+0

어떤 부분이 작동하지 않는지 설명 할 수 있습니까? –

+0

문서가 준비되면 jQuery가 실행됩니까? 전체 코드를 제공해 주시겠습니까? – Usman

+0

@Usman, 질문을 업데이트했습니다. –

답변

1

좋아요. 무슨 일이 일어나는지 봅니다. 원래는 잘못된 태그가 있었지만 현재 navContainer는 클래스이고 ID가 아니므로 $("#navContainer li") 대신 $(".navContainer li")을 사용해야합니다. 나는 데모를 함께 던져 버렸어. 너를 가야 해.

http://jsfiddle.net/nHJvz/1/

+0

고마워요,하지만 jquery를 올바른 위치에두고 있다고 생각하지 않습니다. 질문에 체크인 할 수 있습니까? –

+0

@XcodeDev 예, 당신이 말하는 것을 봅니다. 스타일 태그가 아닌 스크립트 태그에 있어야합니다. [이렇게] (http://jsfiddle.net/nHJvz/). –

+0

@ XcodeDev 내 편집을 참조하십시오. –

2

<script type="text/javascript"> 
      $("#navContainer li").click(function() { 
       $("#navContainer li").css("color", "#d49a9a"); 
       $(this).css("color", "#c2c0c0"); 
      }); 
</script> 

또한

<script type="text/javascript"> 
    $(document).ready(function(){ 
       $(".navContainer li").click(function() { 
        $(".navContainer li").css("color", "#d49a9a"); 
        $(this).css("color", "#c2c0c0"); 
       }); 
    }); 

    </script> 

로하는 것은 만들 교체가 제대로 당신은 데모를 볼 수 있습니다 <head><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 퍼팅처럼 jQuery를 로딩하고 있는지 http://jsfiddle.net/CedZs/