탭 패널에 슬라이더 내용이 표시되지 않습니다.

Question

안녕하세요 저는 버튼에 탭 기능을 사용하기 위해 자바 스크립트를 사용하고 있습니다. 각 탭에서 나는 슬라이더를 보여주고 싶습니다. 내가 직면하고있는 문제는 슬라이더의 내용이 두 번째 및 세 번째 탭에 표시되지 않는다는 것입니다. 탭 기능에 문제가 없습니다. 탭 기능이 작동합니다. 한 탭에서 다른 탭으로 전환 할 수 있습니다. 누구든지 도와 줄 수 있습니다. 여기

는 슬라이더가 거기에 내가 탭 기능을

<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 슬라이더의

Intializtion 코드

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