0

嗨，我正在使用 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-->

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


    });
           });
4

1 回答 1

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);
        }
    });
});
于 2013-04-13T21:23:59.857 回答