Панель с вкладками не показывает содержимое слайдера

Question

Привет я использую JavaScript, чтобы получить функциональность вкладок для кнопок. В каждой вкладке я хочу показать слайдер, для которого я показываю что-нибудь слайдер. Проблема, с которой я сталкиваюсь, заключается в том, что содержимое ползунка не отображается на 2-й и 3-й вкладках. Нет проблем с работоспособностью функции tab.fabs. Я могу переключаться с одной вкладки на другую. Может ли кто-нибудь мне помочь.

Вот скрипт, который я использую для функциональности вкладок

<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-->

Код инициализации муравейника

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


    });
           });

Answer 1

Есть ли слайдер во второй и третьей вкладках?

Я использовал ваш код, чтобы собрать это демо, и все это, кажется, работает для меня.

Кроме того, вам не нужно заключать код в две готовые к работе функции, достаточно одной:

$(function () { // same as $(document).ready(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);
        }
    });
});