Question

我将类别选项卡作为woocommerce商店类别，当我将owl轮播添加到一个选项卡，并使用html标签，css类，jQuery代码切换标签之间切换选项卡，2个标签永久获取活动类，怎么能我明白了。

＆＃13;

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

＆＃13;

/* 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
}

＆＃13;

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

＆＃13;

我在很多网站上搜索过，我想知道当我删除猫头鹰旋转木马时，冲突原因是什么原因，它工作正常

Answer 1

我想通过将owl.carousel.min.css中的owl-carousel活动类更改为另一个类名来解决问题，以阻止owl-carousel和bootstrap选项卡之间的冲突。

我有关于owl carousel插件的问题

1 个答案: