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

Slider does not work in the jQuery Tabs

本文关键字：不起作用选项 jQuery 更新时间：2023-09-26

我想在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;

你需要初始化你的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;
        }
    }
});

我想提供另一个适合我的解决方案。我深入研究代码，使用firebug发现Andres是对的。这个问题是因为所有的隐藏

在开始时都将其宽度设置为0。当我打开firebug，一切都很好，隐藏

采取正确的宽度。我就是这么做的:我把这段代码放在click事件和过渡之后:

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

希望对大家有用。

也许这对你会有帮助。

将此脚本添加到第一个选项卡内容页

$(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 ();