2013-02-24 60 views
0

我工作的那一刻一个网站,使用jQuery UI的标签,在每个我implment的jCarousel,它的外观和在第一个选项卡工作正常标签,但当我切换到第二个或第三个选项卡时,没有jcarousel功能,为什么这是?这里是我的代码,jQuery UI的标签和jQuery插件 - 插件只被初始化一次

`$("#related").tabs();` 
`$('#complimentary-carousel, #similar-carousel, #viewed-carousel').jcarousel({ 
    scroll : 5, 
    visible: 5 
});` 

的HTML看起来像这样,

<div id="related" class="clearfix"> 
    <ul class="tabs"> 
     <li><a href="#complimentary">Complimentary</a></li> 
     <li><a href="#similar">Similar</a></li> 
     <li><a href="#viewed">Recently Viewed</a></li> 
    </ul> 
    <div id="complimentary"> 
     <ul id="complimentary-carousel" class="carousel"> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <div id="similar"> 
     <ul id="similar-carousel" class="carousel"> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <div id="viewed"> 
     <ul id="viewed-carousel" class="carousel"> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;50</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
      <li> 
       <a href=""> 
        <img src="assets/img/products/mini-radio.png"/> 
        <span class="price">&euro;30</span> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

回答

0

见问题here。这似乎是使其工作的唯一方法是在'tabsshow'事件上初始化jcarousel。如果您尝试在隐藏的标签上初始化它们,您将面临其他插件和小部件的问题。