bxslider未在标签ui中激活

时间:2015-06-19 08:16:41

标签: jquery jquery-ui tabs jquery-tabs

我在SO数据库中搜索过这个问题,但没有SUCH问题。

我在每个标签页(bxslider)中都有3个配置标签(标签页UI)和滑块。

HTML:

<div id="tabs">
  <ul>
    <li><a href="#refrig">Грузовик-рефрижератор</a></li>
    <li><a href="#tent">Тентованный грузовик</a></li>
    <li><a href="#tral">Грузовик-трал</a></li>
  </ul>

  <div id="refrig">
    <p>
      Content 1
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_refr">
        <ul>
          <li><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></li>
          <li><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></li>
        </ul>
      </div>

      <div class="slider_refr-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></a>
      </div>
    </div>
  </div>

  <div id="tent">
    <p>
      Content 2
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_tent">
        <ul>
          <li><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></li>
          <li><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></li>
        </ul>
      </div>
      <div class="slider_tent-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></a>
      </div>
    </div> 
  </div>

  <div id="tral">
    <p>
      Content 3
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_tral">
        <ul>
          <li><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></li>
          <li><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></li>
        </ul>
      </div>
      <div class="slider_tral-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></a>
      </div>
    </div>
  </div>

</div>

JS初始化

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

  $( "#tabs" ).tabs({
    activate: function( event, ui ) {

      var tablength = ui.newPanel;

      var tab_id = $(ui.newPanel).attr('id');
      //alert(tab_id);

      if(tab_id == "tent" && slider2_initialized == false)
      {
        $('.slider_tent ul').bxSlider({
          controls: false,
          pagerCustom: '.slider_tent-pager'
        });
        slider2_initialized = true;
      }
      else if(tab_id == "tral" && slider3_initialized == false)
      {
        $('.slider_tral ul').bxSlider({
          controls: false,
          pagerCustom: '.slider_tral-pager'
        });
        slider3_initialized = true;
      }
    }
  });

  $('.slider_refr ul').bxSlider({
    controls: false,
    pagerCustom: '.slider_refr-pager'
  });

});

但是当我转到第二个或第三个标签时,没有内容和滑块加载。

0 个答案:

没有答案