javascript - 单标签多内容 Bootstrap 4

Question

我正在处理 Bootstrap 选项卡，我正在尝试使用具有多个内容 div 的单个选项卡。我尝试使用两个数据目标值，例如 data-target=".etab-p1, .etabi-img1"。但它只适用于一个内容 div，其他第二个内容没有改变。

$(document).ready(function() {
  $('#myTab a').click(function() {
    var href = $(this).attr('href');
    if (href == "[href^='tab-']") {
      $('.tab-pane').css('display', 'none');
      $("[class^='etab-'][class^='etabi-']").removeClass('show');
      $("[class^='etab-'][class^='etabi-']").css('display', 'block');
      $("[class^='etab-'][class^='etabi-']").addClass('show');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active etab-p1">
    <p>Content 1.</p>
  </div>
  <div class="tab-pane fade etab-p2">
    <p>Content 2.</p>
  </div>
  <div class="tab-pane fade etab-p3">
    <p>Content 3.</p>
  </div>
  <div class="tab-pane fade etab-p4">
    <p>Content 4.</p>
  </div>
  <div class="tab-pane fade etab-p5">
    <p>Content 5.</p>
  </div>
  <div class="tab-pane fade etab-p6">
    <p>Content 6.</p>
  </div>
</div>
<div class="tab-content">
  <div class="tab-pane fade show active etabi-img1">
    <p>Content 111.</p>
  </div>
  <div class="tab-pane fade etabi-img2">
    <p>Content 2222.</p>
  </div>
  <div class="tab-pane fade etabi-img3">
    <p>Content 3333.</p>
  </div>
  <div class="tab-pane fade etabi-img4">
    <p>Content 4444.</p>
  </div>
  <div class="tab-pane fade etabi-img5">
    <p>Content 5555.</p>
  </div>
  <div class="tab-pane fade etabi-img6">
    <p>Content 6666.</p>
  </div>
</div>

Answer 1

使用 show.bs.tab事件

$('#myTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
  let target = $(e.target).data('target');
  $(target)
    .addClass('active show')
    .siblings('.tab-pane.active')
    .removeClass('active show')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link active show" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active etab-p1">
    <p>Content 1.</p>
  </div>
  <div class="tab-pane fade etab-p2">
    <p>Content 2.</p>
  </div>
  <div class="tab-pane fade etab-p3">
    <p>Content 3.</p>
  </div>
  <div class="tab-pane fade etab-p4">
    <p>Content 4.</p>
  </div>
  <div class="tab-pane fade etab-p5">
    <p>Content 5.</p>
  </div>
  <div class="tab-pane fade etab-p6">
    <p>Content 6.</p>
  </div>
</div>
<div class="tab-content">
  <div class="tab-pane fade show active etabi-img1">
    <p>Content 111.</p>
  </div>
  <div class="tab-pane fade etabi-img2">
    <p>Content 2222.</p>
  </div>
  <div class="tab-pane fade etabi-img3">
    <p>Content 3333.</p>
  </div>
  <div class="tab-pane fade etabi-img4">
    <p>Content 4444.</p>
  </div>
  <div class="tab-pane fade etabi-img5">
    <p>Content 5555.</p>
  </div>
  <div class="tab-pane fade etabi-img6">
    <p>Content 6666.</p>
  </div>
</div>