javascript - 可以消失放在两个之间?

Question

我试图在两个 md-tab 之间放置一个消失的 div，但是当按下 md-tab 时它似乎没有出现。

消失的 div 代码在一个单独的程序中工作，但在放置在两个 md 选项卡之间时，它似乎并没有按照预期的方式出现。

     <md-tabs md-stretch-tabs
           md-selected="selectedIndex" id="top_tabs" class="mainTabs">

     <md-tab label="home">
         <md-tab-label class="showSingle" target="1">
         <span><i class="material-icons">Summary</i></span>
         </md-tab-label>
     </md-tab>

     <div id="div1" class="targetDiv">Lorum Ipsum1</div>

     <md-tab label="summery" class="showSingle" target="2">
       <md-tab-label  class="showSingle" target="2">
       <i class="material-icons">Contact</i>
       </md-tab-label>
     </md-tab>
     <div id="div2" class="targetDiv">Lorum Ipsum2</div>
      </md-tabs>

Javascript：

     <script>
     jQuery(function() {
       jQuery('#showall').click(function() {
         jQuery('.targetDiv').show();
       });
      jQuery('.showSingle').click(function() {
         jQuery('.targetDiv').hide();
         jQuery('#div' + $(this).attr('target')).show();
       });
    });
    </script>

CSS：

    <style type="text/css">
     .targetDiv{
     display: none;
     height: 10px;
     }
     </style>