Jquery ui Flexslider&x2B；散列+；jquery UI选项卡冲突？_Jquery Ui_Hash_Tabs_Conflict_Flexslider

Jquery ui Flexslider&x2B；散列+；jquery UI选项卡冲突？

jquery-ui hash tabs

Jquery ui Flexslider&x2B；散列+；jquery UI选项卡冲突？,jquery-ui,hash,tabs,conflict,flexslider,Jquery Ui,Hash,Tabs,Conflict,Flexslider,我会尽量解释这一点，因为我不是一个开发人员基本上，我在我的工作站点上使用了jQueryUITabs插件，总共有3个选项卡。在每一个标签中都会有一个flexslider，可以滚动5张幻灯片还有一个为我们开发的标签哈希系统，它允许从URL到单个标签内容区域的深度链接我遇到的问题是，如果有人直接链接到第二个或第三个选项卡，第一个选项卡上的flex滑块并不总是显示其内容。该框带有导航和分页功能，但实际上没有显示任何内容。这似乎只有在通过URL链接到第二个或第三个选项卡时才会发生。如果通过URL链接

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

基本上，我在我的工作站点上使用了jQueryUITabs插件，总共有3个选项卡。在每一个标签中都会有一个flexslider，可以滚动5张幻灯片

还有一个为我们开发的标签哈希系统，它允许从URL到单个标签内容区域的深度链接

我遇到的问题是，如果有人直接链接到第二个或第三个选项卡，第一个选项卡上的flex滑块并不总是显示其内容。该框带有导航和分页功能，但实际上没有显示任何内容。这似乎只有在通过URL链接到第二个或第三个选项卡时才会发生。如果通过URL链接到第一个选项卡，则所有FlexSlider都会相应地工作

基本上jQuery选项卡需要使用Flexslider&URL深度链接。任何建议都将不胜感激

这是我正在使用的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' );
});


$（函数（）{
$（“#制表符”）.tabs（）；
});
//Flexslider配置（2014年2月24日更新）
var sliderinit=函数（t）{
$（'#'+t+'.flexslider'）.flexslider({
动画：“幻灯片”，
行动：没错，
pauseOnHover:是的，
幻灯片速度：9000，
动画速度：500，
随机化：对，
animationLoop：真
});
}
$（窗口）。加载（函数（）{
sliderinit（'tabs-1'）；
});
$（文档）。在（'单击'，'上。ui选项卡定位'，函数（）{
var t=$（this.attr（'href'）.replace（'#'，''）；
滑块（t）；
}); 
//
$（函数（）{
变量选项卡=$（'.ui选项卡'），
tab_a_选择器='ul.ui-tabs-nav a'；
tabs.tabs（{event:'change'}）；
tabs.find（选项卡选择器）。单击（函数（）{
变量状态={}，
id=$（this）.closest（'.ui选项卡'）.attr（'id'），
idx=$（this.parent（）.prevAll（）.length；
状态[id]=idx；
$.bbq.pushState（州）；
});
$（窗口）.bind（'hashchange'，函数（e）{
tabs.each（函数（）{
var idx=$.bbq.getState（this.id，true）| 0；
$（this.find（tab_a_选择器）.eq（idx）.triggerHandler（'change'）；
var t=$（this）.find（tab_a_选择器）.eq（idx）.attr（'href'）.replace（'#'，''）；
滑块（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 -->

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:

Hi Rahul，感谢您的回复，但需要使用Flexslider，因为这是我们网站使用的。抱歉，我编辑了我的问题以包含这些信息。我使用

flexslider

制作了一个新的工作演示，并更新了我的JSFIDLE演示链接和我答案中的代码。如果你有任何问题，请告诉我

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