탭 메뉴에서 jquery를 사용합니다.

Question

jquery 탭 플러그인을 사용하지 않고 탭 메뉴를 만들려고합니다. 나는 tabheader 클래스를 탭 메뉴로 만들었습니다. 자식 <a>을 클릭하면 클래스 tabed_contents에서 id이 tabed_contents이고이 탭과 같은 탭 메뉴의 앵커 태그의 href가 나타납니다.

<ul class="tabheader"> 

<li class="active" ><a href="#fragment-1"><span>FAQs</span></a></li> 

</ul> 

<div id="fragment-1" class="tabed_contents"> 
aasd 

</div> 

my fiddle

은 내가 HREF 값을 얻고 that..help 후 폼 hide.Am 완전히 삼진 에드을 보여

내 JQ

$('.tabs > ul.tabheader > li > a').on('click', function() { 

    var href = $(this).attr('href'); 
    $(href).show(); 
}) 

Answer 1

먼저 같은 hide 모든 div의,

$('.tabs > ul.tabheader > li > a').on('click', function() { 
    $('.tabed_contents').hide();// hide previously shown containers 
    var href = $(this).attr('href'); 
    $(href).show();// shows the div for which your tab is selected 

    $('.tabs > ul.tabheader > li').removeClass('active'); 
    // add class to li 
    $(this).closest('li').addClass('active'); 
}); 

Answer 2

날을 resepected ID를 만들 당신 때문에 앵커 태그를 사용하는 경우 앵커의 링크가 브라우저를 새로 고치는 것을 방지해야합니다. 이를 위해 preventDefault()을 사용할 수 있습니다. 대신, 보조 노트에

event.preventDefault(); 

, 당신은 링크의 href을 끌어 jQuery의 attr() 방법을 사용해서는 안 :

다음

...'click', function(event) { ... 

호출이 함수 호출을 통해 이벤트를 전달 포함 당신은 단순히 this.href을 사용할 수 있습니다.

모두 함께, 함수는 다음과 같이보고 끝날 것입니다 : 내가 볼 수

$('.tabs > ul.tabheader > li > a').on('click', function(event) { 
    /* Prevent the link event from refreshing the page. */ 
    event.preventDefault(); 

    var href = this.href; 
    $(href).show(); 
}) 

Answer 3

한 가지 요소가 표시된 상태를 유지한다는 것입니다, 단순히 각각의 하나를 표시하기 전에 모든 항목을 숨기려면 다음 줄을 사용합니다 :

$('.tabed_contents').hide(); 

또한 jQuery UI Tabs을 사용하지 않는 이유가 있습니까?

실제로 원하는 것을 지정하지 않았으므로 더 많은 도움이 필요하면 질문에 대해 자세히 설명해주십시오.