我有一个关于猫头鹰轮播插件的问题

Question

我正在将类别选项卡制作为WooCommerce商店类别，当我将Owl轮播添加到一个选项卡中，并使用html标签，css类，jQuery代码在选项卡之间切换以制作切换选项卡，其中2个选项卡永久处于活动状态，我该如何修复它。

$(document).ready(function() {
  $(".project-tabs li a").click(function() {
    $("tab-pane").toggleClass('active');
    $("tab-pane").toggleClass('in');
  });
});

/* Start our projects*/
.projects {
  margin: 50px 0;
}
.projects .project-tabs {
  position: relative;
  margin: 40px auto;
  justify-content: center;
}
.projects .project-tabs:before {
  content: "";
  display: table
}
.projects .project-tabs li {
  width: 20%;
  float: right;
  position: relative
}
.projects .project-tabs>li a {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 20px auto;
  border-radius: 100%;
  padding: 0;
  display: block;
  border: 1px solid transparent;
}
.project-content {
  margin-top: 50px;
  padding: 20px 0
}
.project-content .tab-pane {
  position: relative;
  display: none
}
.tab-pane.active {
  display: block
}
span.round-tabs {
  width: 145px;
  height: 39px;
  line-height: 30px;
  display: inline-block;
  background: white;
  z-index: 2;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 16px;
}
@media (max-width: 585px) {
  .projects .project-tabs>li a {
    width: 50px;
    height: 50px
  }
  span.round-tabs {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }
  .liner {
    top: 50%
  }
  .projects .project-tabs>li a.active:after {
    display: none
  }
}
span.round-tabs.one {
  color: #000;
}
a.active span.round-tabs.one {
  background: transparent !important;
  border-top: 2px solid #B99B85;
  border-bottom: 2px solid #B99B85;
  color: #B99B85;
}
span.round-tabs.two {
  color: #000;
}
a.active span.round-tabs.two {
  background: transparent !important;
  border-top: 2px solid #B99B85;
  border-bottom: 2px solid #B99B85;
  color: #B99B85;
}
span.round-tabs.three {
  color: #000;
}
a.active span.round-tabs.three {
  background: transparent !important;
  border-top: 2px solid #B99B85;
  border-bottom: 2px solid #B99B85;
  color: #B99B85;
}
span.round-tabs svg {
  transform: rotate(-45deg)
}
.fade {
  opacity: 0
}
.fade.in {
  opacity: 1;
  transition: opacity .7 ease-in-out
}
.project-content .project-img img {
  max-height: 315px
}
.project-content .project-text {
  padding-top: 15px
}
.project-content .project-text h5 {
  margin-top: 20px
}
.project-content a {
  color: #fff;
  float: left
}

<div class="container">
  <div class="projects wow bounceInUp">
    <h2 class="text-divider text-center">ماذا نقدم لك <span class="primary-text mr-1">؟</span></h2>
    <div class="border-bottom"></div>
    <div class="border-bottom-2"></div>
    <div class="project-inner">
      <ul class="nav project-tabs" id="myTab">
        <div class="liner"></div>
        <li data-toggle="tooltip" data-placement="top" title="مرحبا بكم">
          <a class="active" href="#home" data-toggle="tab" aria-expanded="false">
            <span class="round-tabs one">جديد</span>
          </a>
        </li>
        <li data-toggle="tooltip" data-placement="top" title="خدمات الاستضافة">
          <a href="#host" data-toggle="tab" aria-expanded="false"><span class="round-tabs two">الاعلي مبيعا</span></a></li>
        <li data-toggle="tooltip" data-placement="top" title="خدمات التصميم">
          <a href="#design" data-toggle="tab" aria-expanded="false"><span class="round-tabs three">مضاف جديد</span></a></li>
      </ul>
    </div>
    <div class="project-content">
      <div class="tab-pane fade active in" id="home">
        <div class="owl-carousel" style="direction:ltr;">
          <?php
            $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 6, 'orderby' =>'date','order' => 'DESC' );
            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
            <div class="wo-block text-center">
              <div class="wo-proudct">
                <div class="wo-img">
                  <a href="<?php the_permalink(); ?>">
                    <div class="wo-overly"></div>
                    <div class="product-button text-center">
                      <div class="sec">
                        <a class="lin" href="#">
                          <i class="fa fa-cart-plus"></i>
                        </a>
                        <a class="lin" href="#">
                          <i class="fa fa-link"></i>
                        </a>
                      </div>
                      <div class="sec">
                        <a class="lin" href="#">
                          <i class="fa fa-heart"></i>
                        </a>
                        <a class="lin" href="#">
                          <i class="fa fa-eye"></i>
                        </a>
                      </div>
                    </div>
                    <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
                  </a>
                </div>
                <div class="title">
                  <h4>
                    <?php the_title(); ?>
                  </h4>
                </div>
                <div class="wo-price">
                  <?php echo $product->get_price_html(); ?>
                </div>
              </div>
            </div>
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
        </div>
      </div>
      <div class="tab-pane fade" id="host">
        <div class="owl-carousel">
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
        </div>
      </div>
      <div class="tab-pane fade" id="design">
        <div class="owl-carousel">
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
          <div> WWW </div>
        </div>
      </div>
    </div>
  </div>
</div>

我已经搜索过很多网站，我想知道当我删除猫头鹰轮播时冲突的原因是什么，它工作正常

Answer 1

我想出了一个解决方案，将 owl.carousel.min.css 中的 owl-carousel 活动类更改为另一个类名，以阻止 owl-carousel 和引导选项卡之间的冲突。