2013-11-10 6 views
0

В принципе, я хотел бы добавить различные карусели на разных вкладках ... Ниже мой исходный код ... Он не работает и не отображает вкладки и карусели .. где я ошибся. Ниже мой код, я включил jquery и HTML .. спасибо!JQuery вкладки не работают в Jcarousel .. Как я могу это исправить?

<script type="text/javascript"> 

jQuery(document).ready(function() { 
    jQuery('.mycarousel').jcarousel(); 
    $("#tabs").tabs(); 
}); 

</script> 
</head> 
<body> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">Carousel One display First Tab</a></li> 
     <li><a href="#tabs-2">Carousel Two display Second Tab</a></li> 
     </ul> 

    <!-- Start of First tab --> 

     <div id="tabs-1"> 
      <ul class="mycarousel" class="jcarousel-skin-tango"> 
      <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
      </ul> 
    </div> 

    <!-- Start of Second tab --> 
    <div id="tabs-2"> 
      <ul class ="mycarousel" class="jcarousel-skin-tango"> 
      <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
      <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
      </ul> 
    </div> <!-- end of second tab --> 


    </div> <!-- End div of tabs --> 

</body> 
</html> 

ответ

1

У вас есть несколько экземпляров идентификатора «mycarousel». Помните, что идентификатор должен быть уникальным - поведение браузера невозможно предсказать, если на одной странице несколько идентификаторов, но обычно jQuery просто выбирает первое вхождение.

Попробуйте использовать:

<ul class="mycarousel jcarousel-skin-tango">...</ul> 

И для JS, вы смешиваете $ и jQuery.

jQuery(document).ready(function($) { 
    $('.mycarousel').jcarousel(); 
    $("#tabs").tabs(); 
}); 
+0

Я сделал это, и она по-прежнему делает это .. –

+0

я заново отредактировал мой вопрос с вашими предложениями, но она по-прежнему не работает –

+0

@StackOne Вы не можете объявлять несколько классов, как это: '<уль класс =» mycarousel "class =" jcarousel-skin-tango ">'. Кроме того, вы смешиваете '$' и 'jQuery'. См. Обновленный ответ. – Terry

 Смежные вопросы

  • Нет связанных вопросов^_^