클릭하면 divs가 표시됩니다.

Question

클릭 기능을 표시해야합니다. jquery의 아코디언/콘텐츠 탭과 같습니다.

현재 클래스를 추가하고 제거하기 위해 jquery를 작성했습니다.

탭을 클릭 할 때 각 div를 표시해야합니다.

여기에 내 코드

$('li').on('click',function(){ 
     $('li a').removeClass('inactive'); 
     $(this).children('a').addClass('inactive'); 
    }); 

DEMO

P.S입니다 - 내가 탭 메뉴에 전환 효과를주고 싶지 않다. 플러그인도 필요하지 않습니다.

Answer 1

당신은 앵커를 클릭 할 때 표시 할 DIV 저장 .data()를 사용할 수 있습니다.

HTML

<ul> 
    <li class="table-view"><a href="#" class="inactive" data-div-class="div1">Div 1</a></li> 
    <li class="chart-view"><a href="#" data-div-class="div2">Div 2</a></li> 
</ul> 

<div class="myDiv div1">Show this by default and remove when clicked on the div 2 tab</div> 
<div class="myDiv div2">Show this when Div 2 tab is clicked</div> 

자바 스크립트

$('li').on('click',function(){ 
    $('li a').removeClass('inactive'); 

    var $anchor = $(this).children('a'); 
    $anchor.addClass('inactive'); 

    //Hide All Divs 
    $('.myDiv').hide(); 

    //Show Div associated with $anchor 
    $("." + $anchor.data('div-class')).show();  
}); 

DEMO

Answer 2

이 시도 : -

('li').on('click',function(){ 
    $('li a').removeClass('inactive'); 
    $('li a').show(); 
    $(this).children('a').addClass('inactive'); 
    $(this).children('a').hide(); 
});