Question

我必须在点击功能上显示相应的dis。就像jquery中的accordion / Content选项卡一样。

目前我已经编写了jquery来添加和删除该类。

我需要在点击标签上显示相应的div。

这是我的代码

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

DEMO

P.S - 我不想在标签菜单上给出切换效果。请不要插件。

Answer 1

您可以使用.data()存储单击锚点时显示的div。

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

单击显示div

2 个答案: