2012-11-22 1 views
-1

나는 jQuery : 자식 요소를 선택하지만 부모를 변경하고 싶습니까?

<ul class="tabs"> 
    <li class="active"><a href="#doc-new">Home</a></li> 
    <li><a href="#doc-fav">Profile</a></li> 
    <li><a href="#doc-read">Messages</a></li> 
</ul> 

jQuery를

와 질문은 어떻게 <a><li> 활성 설정 jQuery를 사용하는 HREF가 을 문서 읽기되고있다 있나요?

<ul class="tabs"> 
     <li><a href="#doc-new">Home</a></li> 
     <li class="active"><a href="#doc-fav">Profile</a></li> 
     <li><a href="#doc-read">Messages</a></li> 
</ul> 

나는 #의 방법 addClass 부모 <li>에 알고를 문서는 읽기하지만 그나마 찾을 수 있습니다.

+0

당신은 (". 탭") $를 호출 addClass를 – GiantHornet

+2

'$는 ("#의 문서가 읽기"("클래스"), 부모 클래스를 사용할 수 있습니다) .parent();'http://api.jquery.com/parent/ –

+0

@Matt Whipple : 앵커 요소에 ID가 지정되지 않았으므로 꽤 잘못되었습니다! 그는 그 요소를 속성으로 가져와야하기 때문에 가능한 해결책입니다 ... $ ('[href = "# doc-read"]'). parent(). attr ('class', 'active'); – Andreyco

답변

4

"이 <a><li> 활성 설정 jQuery를 사용하는 방법 ID가 문서를 읽기인가?"addClass()와 removeClass()를 사용

"id"가 아닌 "href"입니다. 어쨌든, 당신은이 작업을 수행 할 것 :

$(document).ready(function() { 
    $("ul.tabs a").click(function() {   // when any anchor clicked 
     $("ul.tabs li").removeClass("active"); // remove current "active" 
     $(this).parent().addClass("active"); // set "active" on parent 
               // of clicked anchor 
    }); 
}); 

:

$('a[href="#doc-read"]').parent().addClass("active"); 

을하지만 아이디어는 다음 클릭 한 중 앵커 요소 당신이 뭔가를 할 거라고 활성에 리튬을 설정하는 경우 데모 : http://jsfiddle.net/tsSQq/

+0

감사합니다. 그러나 여기 진짜 문제는 각 탭 테이블 ASP.NET 프로젝트에 대한 탭이 있습니다. 페이지를 다시로드 한 후 이전 탭이 작동하지 않습니다. 나는 반응 탭이 필요없이 변경하기 전에 작업하고있다. – Shinichi

+0

@ 신이치 선택을 유지하려면 현재 탭 ID를 다음 페이지로 전달해야합니다. –

+0

귀하의 코멘트에 언급 된 "실제 문제"를 해결하기 위해 당신은 $ ('a [href = "# doc-read"]'). parent(). addClass ("active");를 사용할 수 있습니다. 내 대답, 또는 귀하의 서버 쪽 코드를 줄 수있는 "활성"클래스를 올바른 요소와 JS에 대한이 전혀 사용하지 마십시오. – nnnnnn

-1

$(".tabs>li:eq(0)").removeClass("active"); 
$(".tabs>li:eq(1)").addClass("active"); 
0

그 쿼리 울부 짖는 소리를 발견하고는 완벽하게 작동 :

$('li:has(a[href="#doc-fav"])').addClass('active'); 
2

앵커 태그 ID를 "doc-read"와 같이 지정하십시오.

$(".tabs li").removeClass('active') 
$(".tabs li").find("#doc-read").parent('li').addClass('active'); 

여기서 한번 시도 -. jsFiddle