В Jcarousel не работают вкладки Jquery. Как это исправить?

Question

В Jcarousel не работают вкладки Jquery. Как это исправить?

0

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

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

Stack One 10 нояб. 2013, в 02:42

Источник

Теги:

javascript

jquery

jcarousel

jquery-tabs

1 ответ

Ещё вопросы

Terry · Answer 1 · 2013-11-09T23-28-00.000Z

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

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

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

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

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

Я сделал это, и он все еще делает это ..
Я отредактировал мой вопрос с вашими предложениями, но он все еще не работает
@StackOne Вы не можете объявить несколько классов следующим образом: <ul class="mycarousel" class="jcarousel-skin-tango"> . Также вы смешиваете $ и jQuery . Смотрите обновленный ответ.