用tab-modals连接我的按钮

Question

我有12个按钮和1个带12个标签的模态。示例：我按下第一个按钮，然后我的选项卡将出现。怎么连接？

使用HTML，CSS，JavaScript，JQuery和Bootstrap what I want. right now.

结果：https://afifadayu.github.io/throwback2017/

Answer 1

只要您使用Bootstrap选项卡，就可以使用此代码段实现您的要求

$("#exampleModal").on('shown.bs.modal', function(e) {
  var tab = e.relatedTarget.hash;
  $('.nav-pills a[href="' + tab + '"]').tab('show')
})

.spacing-img {
  margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row center-fix">
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-jan" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/1.jpg" class="img-fluid rounded-circle" alt="jan">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-feb" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/2.jpg" class="img-fluid rounded-circle" alt="feb">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-mar" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/3.jpg" class="img-fluid rounded-circle" alt="mar">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-apr" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/4.jpg" class="img-fluid rounded-circle" alt="apr">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-may" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/5.jpg" class="img-fluid rounded-circle" alt="may">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-jun" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/6.jpg" class="img-fluid rounded-circle" alt="jun">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-jul" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/7.jpg" class="img-fluid rounded-circle" alt="jul">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-aug" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/8.jpg" class="img-fluid rounded-circle" alt="aug">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-sep" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/9.jpg" class="img-fluid rounded-circle" alt="sep">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-oct" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/10.jpg" class="img-fluid rounded-circle" alt="oct">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-nov" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/11.jpg" class="img-fluid rounded-circle" alt="nov">
    </a>
  </div>
  <div class="col-4 col-md-2 spacing-img">
    <a href="#tab-dec" data-toggle="modal" data-target="#exampleModal">
      <img src="https://afifadayu.github.io/throwback2017/asset/img/12.jpg" class="img-fluid rounded-circle" alt="des">
    </a>
  </div>
</div>





<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-jan">Jan</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-feb">Feb</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="mar-tab" data-toggle="tab" href="#tab-mar">Mar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="apr-tab" data-toggle="tab" href="#tab-apr">Apr</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="may-tab" data-toggle="tab" href="#tab-may">May</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="jun-tab" data-toggle="tab" href="#tab-jun">Jun</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="jul-tab" data-toggle="tab" href="#tab-jul">Jul</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="aug-tab" data-toggle="tab" href="#tab-aug">Aug</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="sep-tab" data-toggle="tab" href="#tab-sep">Sep</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="oct-tab" data-toggle="tab" href="#tab-oct">Oct</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nov-tab" data-toggle="tab" href="#tab-nov">Nov</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="dec-tab" data-toggle="tab" href="#tab-dec">Dec</a>
          </li>
        </ul>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="tab-content">
          <div class="tab-pane fade" id="tab-jan">
            Jan
          </div>
          <div class="tab-pane fade" id="tab-feb">
            Feb
          </div>
          <div class="tab-pane fade" id="tab-mar">
            Mar
          </div>
          <div class="tab-pane fade" id="tab-apr">
            Apr
          </div>
          <div class="tab-pane fade" id="tab-may">
            May
          </div>
          <div class="tab-pane fade" id="tab-jun">
            Jun
          </div>
          <div class="tab-pane fade" id="tab-jul">
            Jul
          </div>
          <div class="tab-pane fade" id="tab-aug">
            Aug
          </div>
          <div class="tab-pane fade" id="tab-sep">
            Sep
          </div>
          <div class="tab-pane fade" id="tab-oct">
            Oct
          </div>
          <div class="tab-pane fade" id="tab-nov">
            Nov
          </div>
          <div class="tab-pane fade" id="tab-dec">
            Dec
          </div>
        </div>

      </div>

    </div>
  </div>
</div>