-1

I have 12 buttons and 1 modal with 12 tabs. Example: I push 1st Button, then my Tab will appear. How to connect it?

USE HTML, CSS, JavaScript, JQuery, and Bootstrap what I want. right now.

result: https://afifadayu.github.io/throwback2017/

afifadayu
  • 1
  • 2
  • Explain further, please. Do you have examples of what you have tried? Perhaps, at the very minimum a screenshot that would give us an indication of what you have? – Darren Dec 30 '17 at 12:45
  • I have had this issue before. Look at this solution https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink. If you get stuck, set up a jsFiddle and I'll adapt it. – Darren Dec 30 '17 at 13:29
  • Actually, are you using Bootstrap Tabs? – Darren Dec 30 '17 at 13:31
  • Okay, glad you found the solution. Did you want to share with the community? – Darren Dec 30 '17 at 15:00
  • Even though you found a solution (" i've done my website") I have posted a snippet below of how I would achieve it. – Darren Dec 30 '17 at 15:25

1 Answers1

0

As long as you are using Bootstrap Tabs then you can achieve your requirements with this snippet

$("#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>
Darren
  • 2,176
  • 9
  • 42
  • 98