Flexslider + hashing + jquery UI选项卡冲突？

Question

我会尽我所能解释这一点，因为我不是一个开发人员。

实际上，我在我的工作站点上使用jquery UI tabs插件，总共有3个选项卡。在这些选项卡中的每个选项卡中都将有一个可滚动5张幻灯片的弹性滑块。

还有一个标签散列系统，它已经为我们开发，允许从URL到各个标签内容区域的深度链接。

我遇到的问题是，如果有人直接链接到第二个或第三个标签，那么第一个标签上的flex滑块并不总是显示其内容。框中有导航和分页，但物理上没有显示内容。这似乎只有在通过URL链接到第二个或第三个选项卡时才会发生。如果您通过URL链接到第一个选项卡，则所有的弹性滑块都会相应地工作。

基本上，jQuery标签页需要使用Flexslider &网址深度链接。任何建议都是非常感谢的！

这是我使用的JS代码：

<!-- Tabs configuration -->
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});

// Flexslider configuration (updated 24/02/2014)

var sliderinit = function(t){
    $('#' + t + ' .flexslider').flexslider({
        animation: "slide",
        pauseOnAction: true,
        pauseOnHover: true,
        slideshowSpeed: 9000,
        animationSpeed: 500,
        randomize: true,
        animationLoop: true
    });
}

$(window).load(function() {
    sliderinit('tabs-1');
});

$(document).on('click', '.ui-tabs-anchor', function () {
    var t = $(this).attr('href').replace('#', '');      
    sliderinit(t);      
}); 





//<!-- jQuery Back Button configuration (BBQ) -->

$(function(){
var tabs = $('.ui-tabs'),
tab_a_selector = 'ul.ui-tabs-nav a';
tabs.tabs({ event: 'change' });
tabs.find( tab_a_selector ).click(function(){
    var state = {},
    id = $(this).closest( '.ui-tabs' ).attr( 'id' ),
    idx = $(this).parent().prevAll().length;
    state[ id ] = idx;
    $.bbq.pushState( state );
});
$(window).bind( 'hashchange', function(e) {
    tabs.each(function(){
        var idx = $.bbq.getState( this.id, true ) || 0;
        $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
        var t = $(this).find( tab_a_selector ).eq( idx ).attr('href').replace('#', '');         
        sliderinit(t);  
    });
})
$(window).trigger( 'hashchange' );
});

​

和HTML：

<div id="tabs-1">
        <div class="flexslider-container">
            <div id="main-slider" class="flexslider">
                <ul class="slides">
                    <li id="one"></li>
                    <li id="two"></li>
                    <li id="three"></li>
                    <li id="four"></li>
                    <li id="five"></li>
                </ul>
            </div> <!-- END FLEX SLIDER -->
        </div><!-- END OF FLEXSLIDER CONTAINER -->
</div> <!-- END OF TABS 1 -->

  <!-- TAB 2 -->
<div id="tabs-2"> 
        <div class="flexslider-container">
            <div id="main-slider1" class="flexslider">
                <ul class="slides">
                    <li id="one"></li>
                    <li id="two"></li>
                    <li id="three"></li>
                    <li id="four"></li>
                    <li id="five"></li>
                </ul>
            </div> <!-- END FLEX SLIDER -->
        </div> <!-- END OF FLEXSLIDER CONTAINER -->
</div> <!-- END OF TABS 2 -->

   <!-- TAB 3 -->
<div id="tabs-3">
        <div class="flexslider-container">
            <div id="main-slider2" class="flexslider">
                <ul class="slides">
                    <li id="one"></li>
                    <li id="two"></li>
                    <li id="three"></li>
                    <li id="four"></li>
                    <li id="five"></li>
                </ul>
            </div> <!-- END FLEX SLIDER -->
        </div> <!-- END OF FLEXSLIDER CONTAINER -->
</div> <!-- END OF TABS 2 -->


</div> <!-- END OF TABS -->

Answer 1

jquery-ui选项卡中flexslider的

JS代码：

$(function() {
     var slider2_initialized = false;
     var slider3_initialized = false;

     $( "#tabs" ).tabs({
         activate: function( event, ui ) {
            //console.log("ui = ");console.log(ui);
            var tab_id = $(ui.newPanel).attr('id');//alert(tab_id);

            if(tab_id == "tabs-2" && slider2_initialized == false)
            {    
                $('#flexslider2').flexslider({
                    animation: "slide"
                  }); 
                //update initialization flag to true
                slider2_initialized = true;
            }
            else if(tab_id == "tabs-3" && slider3_initialized == false)
            {    
                $('#flexslider3').flexslider({
                    animation: "slide"
                  }); 
                //update initialization flag to true
                slider3_initialized = true;
            }
         }
     });

$('#flexslider1').flexslider({
    animation: "slide"
  });   
});

HTML：

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
    <div id="flexslider1">
  <ul class="slides">

  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>
</p>
</div>

<div id="tabs-2">
<p>
    <div id="flexslider2">
  <ul class="slides">

  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>
</p>
</div>

<div id="tabs-3">
<p>
    <div id="flexslider3">
  <ul class="slides">

  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>

</p>
</div>
</div>