2012-01-23 1 views
0

여러 클래스가있는 메뉴 요소에 jquery를 사용하여 활성 클래스를 추가하려면 어떻게해야합니까? 지금까지, 아래에있는 내 코드가 작동하지 않습니다jquery 다른 jquery로 활성 클래스의 여러 클래스 추가

JQUERY

$('#foo_menu li a').click(function(){ 
    $('#foo_menu li a').removeClass('menucolor'); 
    $(this).addClass('menucolor'); 
}); 

HTML

<ul id="foo_menu"> 
<li><a href="/fooA" class="fooa qtipmenu menucolor" id="foo_A"></a></li> 
<li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></li> 
<li><a href="/fooB" class="fooc qtipmenu" id="foo_C"></a></li> 
</ul> 

참고 : qtipmenu 클래스는 jQuery로 팝업을 생성 - http://craigsworks.com/projects/qtip2/); 이

CSS

#menu li a.fooa { 
    background-image: url(/images/foo_a.png); 
    height: 20px; 
    width: 20px; 
} 
#menu li a.menucolor { 
    background-position: left bottom; 
    height: 20px; 
    width: 20px; 
} 
+0

코드를 파일에 그대로 복사 했습니까? –

+0

@ jfriend00 사이트의 다른 곳에서 작동하지만이 메뉴에는 작동하지 않습니다. 각 메뉴 항목이 별도의 클래스 (이미지 메뉴 용)가 있고 팝업 메뉴 용 클래스를 공유하기 때문에 그 것인지 궁금합니다. – chowwy

답변

2

위의 JQuery와 스크립트와 충돌하는 경우 this jsfiddle에서 알 수 있듯이 당신이 당신의 코드가 잘 작동되는 것을 볼 수 있습니다 확실하지. (그러나 나는 menucolor 클래스를 제거하기 위해 셀렉터를 변경했다. 그러나 그것은 중요하지 않다).

귀하의 문제는 거의 다른 곳에 있습니다.

removeClassaddClass 기능은 클래스 수에 관계없이 작동합니다.

+0

실제로, 당신은 두 가지 도움을주었습니다 : 당신은 클릭 (function (e) - 나는 e와 e.preventDefault()없이 click (function()을 가졌습니다.) 이제 toggle을 위해 active class를 얻었습니다. 하지만 preventDefault를 사용하면 페이지를로드 할 수 없으며 prevDef가 없으면 클래스 추가 기능이 작동하지 않습니다. – chowwy

+0

아! 설명해 드리겠습니다. 링크가 페이지를 새로 고침하지 않고 정상적으로 실행되기를 바랐다 고 생각했습니다. . 그럼 모두에게 기쁨! –

+0

작은 문제 하나 : 메뉴의 활성 클래스가 훌륭하게 작동하지만 preventDefault가 페이지를로드 할 수 없으며 prevDef가 없으면 메뉴의 활성 클래스가 작동하지 않고, 페이지가로드되는 이유는 무엇입니까? – chowwy

관련 문제