標籤面板不顯示滑塊內容

Question

您好我正在使用JavaScript獲取按鈕的標籤功能。在每個選項卡中，我想顯示一個滑塊，爲其顯示任何滑塊。我正面臨的問題是滑塊內容沒有顯示在第二和第三個標籤中。標籤的功能沒有問題。功能工作正常。我可以從一個標籤切換到其他任何人。任何人都可以幫助我。

這裏是我使用標籤功能的標籤

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

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