2010-08-16 5 views
4

내 페이지에 div가 표시되고 다른 것을 숨기는 텍스트 영역이 필요합니다 (다른 8 개의 div로 가정). 클릭하면 선택한 div가 표시되고 현재 div & 다른 div가 숨기를 바랍니다. 이 간단한 해결책이 있습니까? 빌드 가능 : show current clicked div hide previous clicked div?jQuery div를 클릭하면 다른 사람들이 보이지 않게합니다.

+0

뭔가를 사용 divs를 전환의

jsFiddle example. – ShawnB

+0

내 솔루션에서'divs '를 토글하기 위해'input' 버튼을 사용했습니다. 그게 무슨 뜻입니까? –

답변

3

다음은 함께 묶는 방법을 사용하는 간단한 해결책입니다.

액티브 버튼의 id 같은 class를 가질 수있다 ($ (". 클래스 명"을 사용 ))
jsFiddle example (("입력")를 $를 사용 )

$("input").click(function() 
{ 
    $("#" + $(this).attr("class")).show().siblings('div').hide(); 
}); 

jsFiddle example 영향을받는 div 또는 별도의 "toggler"클래스를 사용할 수 있습니다.

중요한 부분은 클릭 한 요소의 고유 한 기능을 사용하여 토글 된 요소의 고유 한 기능에 매핑하는 것입니다.

마지막으로 토글 divs이 형제가 아닌 경우 var divs = $("#blah1, #blah2, #blah3, ...");을 사용하여 모두 선택기를 설정하고 .not()을 사용하여 토글 할 수 있습니다. 페이지의 다른 영역 (리튬 A)를 클릭하면 내가/숨기기를 보여주기 위해이 된 div 싶습니다 - 비 형제 자매 내가 왼쪽으로 .not()

+0

잘 돌아갔습니다. a.class가 다른 이벤트에 사용 되었기 때문에 .not() 예제를 사용하고 img를 선택자로 사용했습니다. 감사! – ShawnB

+0

@ShawnB - 듣기 좋네. 문제를 해결하는 답변 (투표 아래의 체크 표시)을 수락하고 유용하다고 생각되는 투표 답변을 잊지 마십시오. –

2

어때? 하나를 클릭하여 다른 사람이 숨겨져되면 물론

$(document).ready(function(){ 
    $('div.some_class').click(function(){ // set of divs to be clickable 
    $(this).siblings('div').hide(); // it's already showing, right? 
    }); 
}); 

는, 당신은 DOM 구조에 따라 다시 데려의 방법 ...

0

이없는 것입니다. 저는 개인적으로 전체 그룹에 쉽게 접근 할 수있는 수업을 제공 할 것입니다. $('.div-group').hide(0, function(){$('#my-div').show();});

필요한 기능에 대한 답변 일 수있는 jQuery UI Accordion을 사용해보십시오.

관련 문제