인접한 탭을 닫지 않고 jQuery로 탭을 전환하는 방법.

Question

힘든 시간을 보냈습니다. 페이지 상단에 3 개의 탭이 있습니다. 페이지로드시 숨겨집니다. 각 탭에는 콘텐츠가 들어 있습니다. 탭 1을 클릭하고 탭 1의 내용을 표시하려면 탭 2를 클릭하고 탭 2의 내용 등을 표시하고 싶습니다. 그러나 각 탭을 두 번 클릭하여 연관된 내용을 숨길 수 있기를 원합니다.

원하는 효과는 탭 1 클릭, 탭 1 내용보기, 탭 2 클릭, 탭 2 내용보기, 탭 2 다시보기, 탭 2 내용 숨기기입니다. 현재 사용중인 코드가 포함되어 있습니다. 이렇게하면 탭이 올바르게 숨겨지고 올바르게 확장되지만 원하는 방식으로 앵커 요소를 클릭하면 각 탭이 전환되지 않습니다. 어떤 도움이라도 대단히 감사합니다.

$('.tabs').hide(); 
    $('ul.tabs li a').click(function() { 
     $('.content').show(); 
}); 

Answer 1

보다는 부모 요소를 활성화하는 .content를 사용하여

$('ul.tabs li a').click(function() { 
    $(this).toggle; 
}); 

, 당신은 다음을 위해 이런 일을하고 싶지 가/쇼를 숨길 수 있습니다, 그래서 클릭, 활성 탭을 클릭 할 때 때

이

if ($(this).hasClass("ui-state-active")) { 
    $(this).toggle(); 
} 

(이 솔루션은 당신의 jQuery UI 탭을 사용하는 가정합니다.)

Answer 2

HTML을 볼 때까지 확신 할 수 없지만 $('.content').toggle();이 작동해야합니다.

Answer 3

도 가지고 문제가 계속 토글을 사용하는 경우 클릭 이벤트

$('ul.tabs li a').click(function() { 
    $('.content').toggle(); 
}); 

를 사용하여 탭이 페이지로드에 숨겨져있는 경우 .toggle()

$('.tabs').hide(); 
$('ul.tabs li a').click(function() { 
    $('.content').toggle(); 
}); 

, 당신은 CSS display: none;에 넣고해야 사용할 수, 그런 다음 각 탭에 대해 고유 ID를 작성하고이를 수행하십시오. 문제는 쿼리 내에있는 : 당신은 그 아이 탭 자체에 대한 클릭 이벤트 내에서