divのトラックを表示して別のdivの表示を変更します

Question

タブレイアウト内の別のdivの表示が変更された場合、divの表示を変更したいと思います。 タブ（id：tab-flyouts）が開いている場合、idがnoshowのdivは非表示にする必要があります。

私はタブフライアウトの可視性をチェックし、それに応じて 'noshow' divの可視性を変更しようとしましたが、機能しませんでした。

<div class="tab-menu"> 
<ul> 
<li><a href="#t1">Tab 1</a></li> 
<li><a href="#t2">Tab 2</a></li> 
<li><a href="#t3">Tab 3</a></li> 
</ul> 
</div> 
<div class="tab-flyouts" id="tab-flyouts" style="display:none"> 
<div class="vc_row wpb_row vc_row-fluid"> 
    <div id="t1" style="display:none"> 
     Tab 1 content 
    </div> 
    <div id="t2" style="display:none"> 
     Tab 2 content 
    </div> 
    <div id="t3" style="display:none"> 
     Tab 3 content 
    </div> 
</div> 
</div> 
<div id="noshow"> 
This needs to be hidden when tabs are open 
</div> 

ここではタブのjqueryです。

$(document).ready(function() { 
$('.tab-menu li > a').on('click', function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var $tabName = $(this).attr('href'); 
    var $tabFlyout = $('.tab-flyouts'); 
$(this).toggleClass('active').closest('li').siblings().children('a').removeClass('active'); 

    if ($tabFlyout.is(':visible')){ 
     if ($this.hasClass('active')) { 
      $('body').addClass('active-tab-menu'); 

      var $activeTab = $tabFlyout.find('div' + $tabName); 
      $activeTab.siblings(':visible').fadeOut(); 
      $activeTab.fadeIn(); 
      var $h2s = $activeTab.find('.filters').siblings('h2'); 
      $h2s.each(function() { 
       var $this = $(this); 
       var $listOfLinks = $this.next('.list-of-links'); 
       if ($listOfLinks.is(':visible')) { 
        if (!$listOfLinks.children('li:visible').length) { 
         $this.hide(); 
        } else { 
         $this.show(); 
        } 
       } 
      }); 
      if (!$activeTab.find('h2:visible').length && !$activeTab.find('.no-results')) { 
       $activeTab.find('.no-search-results').show(); 
      } 
     } else{ 
      $('body').removeClass('active-tab-menu'); 

      $tabFlyout.slideUp(function() { 
       $tabFlyout.children('.wrapper > div').hide(); 
      }); 
     } 
    } else { 
     $('body').addClass('active-tab-menu'); 

     var $activeTab = $tabFlyout.find('div' + $tabName); 
     $activeTab.show().siblings().hide().end().end().slideDown('fast', function() { 
      $('body').trigger('tab_flyout.open'); 
     }); 
    } 
}); 
}); 

https://codepen.io/anon/pen/ooXdLd

Answer 1

あなたがすべてのタブが開いているnoshow DIVを非表示にする場合、これはあなたが常に一度に一つのタブを表示しているので、あなたのコードに基づくことはできず、他のタブは表示されません。

しかし、あなただけタブが開いているときにnoshow DIVを非表示にする場合：タブが隠されているとき

• は$('noshow').show()を追加します。
• タブが表示されたら、$('noshow').hide()を追加します。
• または、$('noshow').toggle()を追加して、それらの間を切り替えます。