javascript – Slider在jQuery选项卡中不起作用

我想在jQuery选项卡中使用2个jQuery Flexsliders.选项卡1上的滑块工作正常,但它在选项卡2中不起作用.

以下是JSFiddle代码的完整演示:

演示:

http://jsfiddle.net/vH5DT/

jQuery代码:

$(document).ready(function() {

    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });

    });

HTML:

<div id="tabvanilla">
    <ul class="tabnav">
      <li><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
    </ul>

    <div id="tab1" class="cf">
      <div id="flexslider1" class="flexslider">

        <ul class="slides">
          <li><img src="" /></li>
          <li><img src="" /></li>
          <li><img src="" /></li>
        </ul>

      </div>
      <div class="flex-container1"></div>

    </div><!-- div#tab1 -->

  <div id="tab2">
       <div id="flexslider2" class="flexslider">
        <ul class="slides">
            <li><img src="" /></li>
            <li><img src="" /></li>
            <li><img src="" /></li>
         </ul>

        <div class="flex-container2"></div>
      </div>

    </div><!-- div#tab2 -->
  </div><!-- div#tabvanilla -->
最佳答案
滑块脚本无法对隐藏元素执行操作的问题有两种可能的方法 – 在每个选项卡单击时重新初始化滑块脚本,或者使用

position: absolute;
left: -999em;

然后

left: auto;

而不是

display: none;

对于标签.

转载注明原文:javascript – Slider在jQuery选项卡中不起作用 - 代码日志