Question

https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html

如何添加＆＃39;有效＆＃39;按钮类？

目前按钮有一个按钮。次要：悬停＆amp; button.secondary：焦点创建按钮背景颜色更改。

这很好，除非每次点击滑块中的任何地方都会改变焦点，因此从按钮中删除背景颜色。

我需要按钮具有专用的活动状态，以便可以在滑块内单击。

由于

Answer 1

您可以使用javascript或jQuery解决此问题，这里是一个jQuery示例：

$(document).ready(function() {
    $('.button').on('click', function(){
        $('.button').removeClass('active');
        $(this).addClass('active');
    });
});

这会删除“有效”状态＆＃39;单击任何带有“＆＃39;按钮”的元素时所有按钮的类并将其添加到您点击的那个。

Answer 2

长时间玩耍后，我想出了解决方案。

在哈希导航中添加#link作为类，在这种情况下，还可以添加另外一个“ slidetabs”类，例如error[E0277]: the trait bound `TrivialGroup: num_traits::identities::Zero` is not satisfied --> src/main.rs:31:15 | 31 | let foo = Bar::<TrivialGroup> { t: TrivialGroup {} }; | ^^^^^^^^^^^^^^^^^^^ the trait `num_traits::identities::Zero` is not implemented for `TrivialGroup` | = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveLoop` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveGroup` for `TrivialGroup` note: required by `Bar` --> src/main.rs:26:1 | 26 | struct Bar<T: AdditiveGroup> { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ error[E0277]: the trait bound `TrivialGroup: std::ops::Neg` is not satisfied --> src/main.rs:31:15 | 31 | let foo = Bar::<TrivialGroup> { t: TrivialGroup {} }; | ^^^^^^^^^^^^^^^^^^^ the trait `std::ops::Neg` is not implemented for `TrivialGroup` | = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::ClosedNeg` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveLoop` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveGroup` for `TrivialGroup` note: required by `Bar` --> src/main.rs:26:1 | 26 | struct Bar<T: AdditiveGroup> { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ error[E0277]: cannot subtract `TrivialGroup` from `TrivialGroup` --> src/main.rs:31:15 | 31 | let foo = Bar::<TrivialGroup> { t: TrivialGroup {} }; | ^^^^^^^^^^^^^^^^^^^ no implementation for `TrivialGroup - TrivialGroup` | = help: the trait `std::ops::Sub` is not implemented for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::ClosedSub` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveQuasigroup` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveLoop` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveGroup` for `TrivialGroup` note: required by `Bar` --> src/main.rs:26:1 | 26 | struct Bar<T: AdditiveGroup> { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ error[E0277]: cannot subtract-assign `TrivialGroup` from `TrivialGroup` --> src/main.rs:31:15 | 31 | let foo = Bar::<TrivialGroup> { t: TrivialGroup {} }; | ^^^^^^^^^^^^^^^^^^^ no implementation for `TrivialGroup -= TrivialGroup` | = help: the trait `std::ops::SubAssign` is not implemented for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::ClosedSub` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveQuasigroup` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveLoop` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveGroup` for `TrivialGroup` note: required by `Bar` --> src/main.rs:26:1 | 26 | struct Bar<T: AdditiveGroup> { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ error[E0277]: cannot add-assign `TrivialGroup` to `TrivialGroup` --> src/main.rs:31:15 | 31 | let foo = Bar::<TrivialGroup> { t: TrivialGroup {} }; | ^^^^^^^^^^^^^^^^^^^ no implementation for `TrivialGroup += TrivialGroup` | = help: the trait `std::ops::AddAssign` is not implemented for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::ClosedAdd` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveSemigroup` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveMonoid` for `TrivialGroup` = note: required because of the requirements on the impl of `_ALGA_DERIVE_TrivialGroup::_alga::general::AdditiveGroup` for `TrivialGroup` note: required by `Bar` --> src/main.rs:26:1 | 26 | struct Bar<T: AdditiveGroup> { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
获取当前幻灯片项，然后获取其数据哈希
将数据哈希作为类添加到已更改的函数中，以将类添加到导航按钮
然后对更改事件重复相同操作以删除活动类
将CSS添加到.slidetabs.active

<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>

$('.owl-carousel').on('changed.owl.carousel', function(event) { var current = event.item.index; var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash'); $('.'+hash).addClass('active'); });

注意：这是按预期的方式进行的，所以我没有做进一步的工作，可能会有更好的解决方案，并且具有良好的编码。

以下为完整代码：

滑块HTML：

$('.owl-carousel').on('change.owl.carousel', function(event) {
  var current = event.item.index;
  var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
  $('.'+hash).removeClass('active');
});

Javascript：

<div class="owl-carousel owl-theme owl-loaded owl-drag">
   <div class="owl-stage-outer">
      <div class="owl-stage">
         <div class="owl-item">
            <div class="item" data-hash="cowboy_coaster">
               <!-- Slide Content -->
            </div>
         </div>
         <div class="owl-item">
            <div class="item" data-hash="night_tubing">
               <!-- Slide Content -->
            </div>
         </div>
         <!-- . -->
         <!-- . -->
         <!-- . -->
         <!-- . -->
      </div>
   </div>
</div>
</div>
<div class="owl-nav">
   <button type="button" role="presentation" class="owl-prev">
      <img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
      <div class="slider-counter">1 / 4</div>
   </button>
   <button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
   <ul>
      <li>
         <a class="dining slidetabs active" href="#dining">DINING</a>
      </li>
      <li>
         <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
      </li>
      <li>
         <a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
      </li>
      <li>
         <a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
      </li>
   </ul>
</div>

CSS：

jQuery(document).ready(function($) {
  $('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
    if (!e.namespace)  {
      return;
    }
    var carousel = e.relatedTarget;
    $('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
    }).owlCarousel({
      nav:true,
      navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
      loop:true,
      slideSpeed : 300,
      paginationSpeed : 400,
      items:1,
      dots:false,
      URLhashListener:true,
      startPosition: 'URLHash',
      autoplay:true,
      autoplayTimeout:9000,
      autoplayHoverPause:true,
      animateOut: 'fadeOut',
      animateIn: 'fadeIn',
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:true
        },
        1000:{
            items:1,
            nav:true
        }
    }
  });

    $('.owl-carousel').on('changed.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).addClass('active');
    });

    $('.owl-carousel').on('change.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).removeClass('active');
    });

});

添加“活跃”＆＃39; class to URL Hash Navigation按钮

2 个答案: