滑块在 jQuery 选项卡中不起作用答案

【问题标题】：Slider does not work in the jQuery Tabs滑块在 jQuery 选项卡中不起作用
【发布时间】：2013-01-07 18:49:03
【问题描述】：

我想在 jQuery 选项卡中使用 2 个 jQuery Flexslider。选项卡 1 上的滑块可以正常工作，但不能在选项卡 2 中工作。

以下是 JSFiddle 上代码的完整演示：

演示：

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

【问题讨论】：

其中一个 jquery 文件正在将第二个选项卡内容“LI”的样式设置为：width: 0px;向左飘浮;显示：块； width:0 是“隐藏”内容
@Andres，是的，我也认为隐藏属性与滑块有问题。你能建议我如何解决它吗？
还在寻找答案

标签： javascript jquery jquery-ui slider flexslider

【解决方案1】：

对于滑块脚本无法作用于隐藏元素的问题，有几种可能的方法——在每次选项卡单击时重新初始化滑块脚本，或者使用

position: absolute;
left: -999em;

然后

left: auto;

而不是

display: none;

对于标签。

【讨论】：

我有点明白你把它放在 .tabs 函数中了吗？或者更多在css中
这是 CSS。将其放在其他 Bootstrap CSS 之后将加载的位置，以便优先。
这会在：.ui-tabs .ui-tabs-panel 中吗？
听起来是对的。寻找切换选项卡时 Bootstrap 隐藏的元素。
我不确定我是否理解......我只是看到 tab1/tab2 使用 jquery ui 获取 aria hidden="true 或 false ..你指的是什么引导程序......你的意思是小提琴中的 flex css？

【解决方案2】：

您需要在可见时初始化您的 flexslider（在标签更改时）

我认为你可以这样做：

$('#tabvanilla').tabs({
    hide: "heightFade",
    show: "heightFade",
    collapsible: true,
    select: function(event, ui) {
        switch (ui.index) {
            case 0:
                // nothing to do since this is selected by default on page load
                break;
            case 1:
                $('#flexslider2').flexslider({
                    animation: "slide",
                    slideshow: true,
                    controlsContainer: ".flex-container2",
                    directionNav: true,
                    controlNav: true
                });
                break;
        }
    }
});

【讨论】：

【解决方案3】：

我想为另一个适合我的解决方案做出贡献。我深入研究代码并使用 firebug 发现 Andres 是对的。问题是因为所有隐藏的

开头的宽度设置为 0。当我打开萤火虫一切正常，隐藏

采用正确的宽度。好吧，我这样做：我在点击事件和转换之后放置了这段代码：

fixWidth = $next_slide.css('width'); // I take the width of the new active slide
$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab
$ul = $flexslide_tab.find('.slides'); // Localize <li> container
$lis = $ul.find('li'); // Get all <li> elements
$lis.each(function(i,elem) {
    $(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});

希望对你有用。

【讨论】：

【解决方案4】：

也许这对你有帮助..

将此脚本添加到第一个标签内容页

$(window).load(function () {
    initFlexSliders();
});


function initFlexSliders() {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "fade",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel",
            start: function (slider) {
                $('body').removeClass('loading');
            }
        });

    $('#carousel-1').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 100,
        itemMargin: 5,
        asNavFor: '#slider-1'
    });

    $('#slider-1').flexslider({
        animation: "fade",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel-1",
        start: function (slider) {
            $('body').removeClass('loading');
        }
    });
}

对于其他选项卡，将其插入内容底部。

initFlexSliders();

【讨论】：