Панель с вкладками, не отображающая содержимое слайдера

Question

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

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

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

Intializtion код 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); 
      } 
     }); 


    }); 
      }); 

Answer 1

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

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

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

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