Javascript document.on（”click“，”myId“，”function（）{}不用于更新owl转盘

我正在尝试使用这个例子，并重写函数以支持点击加载，如下所示

$(document).on("click","#myId",function(){
    $("#owl-demo").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
});

…这样我就可以在我的网页中使用它来切换div，如下所示：

<div class="tabs clearfix">
  <ul>
    <li class="active"><a href="#01" id="myId" data-toggle="tab">2015</a></li>
    <li><a href="#02" id="myId" data-toggle="tab">2014</a></li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="01">
    <div id="owl-demo">
      <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
    </div>
  </div>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="02">
    <div id="owl-demo">
      <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
    </div>
  </div>
</div>

我正试图实现如下所示的东西，从左窗口单击选项卡，在右窗口上旋转不同的图像

---

非常感谢您的帮助。谢谢！

我认为定制比从头开始编写更容易。只需将每个旋转木马放入各自的选项卡容器中。然后在页面加载时同时初始化所有旋转木马。我不认为每次切换到新ta时都需要重新初始化整个插件b、 您的标记将如下所示：

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
             <div id="owl-slider-1">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
        <div id="tab-2" class="tab-content">
             <div id="owl-slider-2">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
        <div id="tab-3" class="tab-content">
             <div id="owl-slider-3">
              <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div>
              <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div>
            </div>
        </div>
    </div>
</div>

(function () {

    $("#owl-slider-1").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $("#owl-slider-2").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $("#owl-slider-3").owlCarousel({
        autoPlay : 3000, //Set AutoPlay to 3 seconds
        items : 2,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });

    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });

})();

---

显然，这段代码完全未经测试，但它应该为您指明正确的方向。

id

应该是唯一的……如果您需要很多，就去上课……@RayonDabre尝试过。似乎没有帮助。第一个选项卡的页面加载良好，但当我单击另一个选项卡时，会显示“2014”所有图像都以堆栈的形式依次显示