javascript - タブ付きパネルにスライダーのコンテンツが表示されない

Question

こんにちは、ボタンのタブ機能を取得するために JavaScript を使用しています。各タブで、スライダーを表示しているスライダーを表示したいと思います。私が直面している問題は、スライダーのコンテンツが 2 番目と 3 番目のタブに表示されないことです。タブの機能に問題はありません。タブ機能は正常に動作しています。あるタブから別のタブに切り替えることができます。

タブ機能に使用しているスクリプトは次のとおりです

<script type="text/javascript">
    $(document).ready(function () {
            var tabContainers = $('div.spec-nav > div');
            tabContainers.hide().filter(':first').show();

            $('div.spec-nav ul li a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.spec-nav ul li a').removeClass('spec-actv');
                $(this).addClass('spec-actv');
                return false;
            }).filter(':first').click();

        });

</script> 

タブとスライダーの HTML コード

<div class="spec-nav">
<ul class="serv-nav">
    <li id="p1"><a href="#first" class="im1 spec-actv">Tab1</a></li>
    <li id="p2"><a href="#second" class="im2">Tab2</a></li>
    <li id="p3"><a href="#third"  class="im3">Tab3</a></li>
</ul>

<div id="first" class="anythingSlider-theme2" style="display:block;float:left;">

   <!-- AnythingSlider #1 -->
   <ul id="slider1">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #1 -->

</div><!--first-->

<div id="second" class="anythingSlider-theme3" style="display:none;float:left;">

    <ul id="slider2">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #2 -->   

</div><!--second-->

<div id="third" class="anythingSlider-theme4" style="display:none;float:left;">
    <ul id="slider3">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #3 -->
    </div><!--third-->

</div><!--spec-nav-->

anthing スライダーの初期化コード

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>     
 $(document).ready(function(){
   $(function(){
   $('#slider1').anythingSlider({
            theme           : 'metallic',
            easing          : 'easeInOutBack',
            navigationFormatter : function(index, panel){
                return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
            },
            onSlideComplete : function(slider){
                // alert('Welcome to Slide #' + slider.currentPage);
            }
        });


    });
           });