Показать divs по клику

Question

Я должен показать соответствующую функцию щелчка. Также как вкладки accordion/Content в jquery.

В настоящее время я написал jquery для добавления и удаления класса.

Мне нужно показать соответствующие divs при нажатии на вкладки.

Вот мой код

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

DEMO

P.S - Я не хочу, чтобы дать тумблер эффект на вкладке меню. И никаких плагинов, пожалуйста.

Answer 1

Вы можете использовать .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> 

JavaScript

$('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(); 
});