这是我正在处理的pen
如果您会看到钢笔,则第一个容器的子div不会显示在结果中。Jquery如下所示,

$('.content-canvas').find('div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');
$('.tab-button').find('span').click(function(){
  $('.tab-button').find('span').removeClass('active');
  var currentclass=$(this).attr('class');
  $(this).addClass('active');
 $('.content-canvas').find('div').each(function(){
    if($(this).attr('class')==currentclass)
    {
      $('.content-canvas').find('div').hide();
      $(this).slideDown(200);
      $(this).children().show(200);
    }
    else
    {
      $(this).hide();
    }
});
});

最佳答案

第一行:

$('.content-canvas').find('div').hide();


改成

$('.content-canvas > div').hide();


对您使用的所有相同选择器执行相同操作。您只需要隐藏direct descendant,而不是全部divs

另外,我建议将这个selecotr缓存到一个变量中:

var elements = $('.content-canvas > div').hide();
...
...
element.each(function() {
...


等等,这样您就不必每次都进入DOM。

关于javascript - 选项卡的子元素不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18735475/

10-12 14:21