jquery轨道输入点击

Question

HamSter

Asked:2020-08-09 20:13:23 +0000 UTC2020-08-09 20:13:23 +0000 UTC 2020-08-09 20:13:23 +0000 UTC

Bootstrap nav nav-pills 在光滑的滑块内

772

有这个标记：

if ($('.nav-pills').length) {
  $('.nav-pills').each(function() {

    var $this = $(this);

    $this.not('.slick-initialized').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      dots: false,
      arrows: false,
      infinite: false,
      touchMove: true,
      draggable: true,
      variableWidth: true,
      focusOnSelect: false,
      responsive: [{
        breakpoint: 992,
        settings: {
          focusOnSelect: true,
        }
      }, ]
    });


    $this.on('afterChange', function(event, slick, currentSlide, nextSlide) {
      //console.log(nextSlide);




    });

  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>




<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Contact</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-4-tab" data-toggle="pill" href="#pills-4" role="tab" aria-controls="pills-4" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-5-tab" data-toggle="pill" href="#pills-5" role="tab" aria-controls="pills-5" aria-selected="false">Contact</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-7-tab" data-toggle="pill" href="#pills-7" role="tab" aria-controls="pills-7" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-15-tab" data-toggle="pill" href="#pills-15" role="tab" aria-controls="pills-15" aria-selected="false">Contact</a>
  </li>
</ul>


<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">1...</div>
  <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab">2...</div>
  <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab">3...</div>
  <div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-4-tab">4...</div>
  <div class="tab-pane fade" id="pills-5" role="tabpanel" aria-labelledby="pills-5-tab">5...</div>
  <div class="tab-pane fade" id="pills-7" role="tabpanel" aria-labelledby="pills-7-tab">7...</div>
  <div class="tab-pane fade" id="pills-15" role="tabpanel" aria-labelledby="pills-15-tab">15...</div>
</div>

如果选项卡切换控件不适合屏幕宽度，则它应该像滑块一样工作。那些。当您单击时nav-link，将添加活动类 active（其中链接变为活动的幻灯片），并且从所有其余部分（以及幻灯片）中删除活动类。那些。一张活动幻灯片，其中的链接和相应的选项卡。

现在所有链接的活动类（被点击）保持活动状态（全部以蓝色突出显示）。

问题：如何在光滑滑块内的引导选项卡上切换活动类？

1 个回答

Voted

Grundy · Answer 1 · 2020-08-11T03:08:05Z

问题是同时使用滑块和选项卡。

额头的决定=在选项卡出现的情况下，从前一个选项卡'show.bs.tab'中删除该类。active

$('.nav-pills').each(function() {
  var $this = $(this);

  $this.on('show.bs.tab', function(e) {
    $(e.relatedTarget).removeClass('active');
    $this.slick('slickGoTo', $(e.target).closest('.slick-slide').index());
    console.log($(e.target).closest('.slick-slide').index());
  });

  $this.slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    infinite: false,
    touchMove: true,
    draggable: true,
    variableWidth: true,
    focusOnSelect: false,
    responsive: [{
      breakpoint: 992,
      settings: {
        focusOnSelect: true,
      }
    }, ]
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous"></script>


<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <div class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Home</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Profile1</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Contact2</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-4-tab" data-toggle="pill" href="#pills-4" role="tab" aria-controls="pills-4" aria-selected="false">Profile3</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-5-tab" data-toggle="pill" href="#pills-5" role="tab" aria-controls="pills-5" aria-selected="false">Contact4</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-7-tab" data-toggle="pill" href="#pills-7" role="tab" aria-controls="pills-7" aria-selected="false">Profile5</a>
  </div>
  <div class="nav-item" role="presentation">
    <a class="nav-link" id="pills-15-tab" data-toggle="pill" href="#pills-15" role="tab" aria-controls="pills-15" aria-selected="false">Contact6</a>
  </div>
</div>


<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">1...</div>
  <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab">2...</div>
  <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab">3...</div>
  <div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-4-tab">4...</div>
  <div class="tab-pane fade" id="pills-5" role="tabpanel" aria-labelledby="pills-5-tab">5...</div>
  <div class="tab-pane fade" id="pills-7" role="tabpanel" aria-labelledby="pills-7-tab">7...</div>
  <div class="tab-pane fade" id="pills-15" role="tabpanel" aria-labelledby="pills-15-tab">15...</div>
</div>
<input id="ddd" type="button" value="goto5" />

Bootstrap nav nav-pills 在光滑的滑块内

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

Bootstrap nav nav-pills 在光滑的滑块内

1 个回答

相关问题