Bootstrap 4,如何自动滚动到打开的标签页内容?

时间:2019-06-17 07:08:33

标签: jquery bootstrap-4 tabs

在手机上查看我的页面时,用户单击一个选项卡,由于它位于下方,因此无法滚动,因此需要滚动才能查看它。

当用户单击选项卡时,我希望它自动滚动到打开的内容。

我已尝试按照此处的解决方案进行操作,但无法使其在我的特定页面上正常工作: Bootstrap tabs scroll effect to content when clicked

任何帮助将不胜感激!

谢谢

蒂姆

jQuery(document).ready(function($) {

  $('.nav a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })

  $('a.scroll').on('click', function(e) {
    var href = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top
    }, 'slow');
    e.preventDefault();
  });




});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

2 个答案:

答案 0 :(得分:1)

使用shown.bs.tab事件

  

在显示标签后,此事件在标签显示上触发。采用   event.target和event.relatedTarget定位到活动标签和   上一个活动标签(如果有)。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<tr<?php bp_field_css_class(); ?>>

    <td class="label"><?php bp_the_profile_field_name(); ?></td>

    <td class="data"><details><?php bp_the_profile_field_value(); ?></details></td>

</tr>

答案 1 :(得分:1)

尝试在setTimeout内添加滚动动画,然后单击a.nav-link而不是a.scroll

jQuery(document).ready(function($) {

  $('.nav a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })

  $('a.nav-link').on('click', function(e) {
    var href = $(this).attr('href');
    setTimeout(() => {
      $('html, body').animate({
        scrollTop: $(href + '.active').offset().top
      }, 'slow');
    }, 500);
    e.preventDefault();
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<section class="ftco-section ftco-schedule" id="schedule-section">
  <div class="container">
    <div class="row justify-content-center pb-5">
      <div class="col-md-12 heading-section text-center ftco-animate">
      </div>
    </div>
    <div class="ftco-schedule">
      <div class="row">
        <div class="col-md-4 nav-link-wrap">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

            <a class="nav-link ftco-animate" id="v-pills-9-tab" data-toggle="pill" href="#v-pills-9" role="tab" aria-controls="v-pills-9" aria-selected="false">Tuesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-10-tab" data-toggle="pill" href="#v-pills-10" role="tab" aria-controls="v-pills-10" aria-selected="false">Wednesday <span>Muay Thai & Mixed Martial Arts</span></a>
            <a class="nav-link ftco-animate" id="v-pills-11-tab" data-toggle="pill" href="#v-pills-11" role="tab" aria-controls="v-pills-11" aria-selected="false">Thursday <span>Muay Thai, Mixed Martial Arts & Boxing</span></a>
            <a class="nav-link ftco-animate" id="v-pills-13-tab" data-toggle="pill" href="#v-pills-13" role="tab" aria-controls="v-pills-13" aria-selected="false">Saturday <span>Muay Thai</span></a>
          </div>
        </div>
        <div class="col-md-8 tab-wrap">

          <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-day-8-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <i class="far fa-hand-point-left fa-4x"></i>
                <div class="text pl-md-5">
                  <h2>Click to see the schedule</h2>
                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="v-pills-9" role="tabpanel" aria-labelledby="v-pills-day-9-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p> Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-10" role="tabpanel" aria-labelledby="v-pills-day-10-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/roy-eubank-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Roy Eubank</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-11" role="tabpanel" aria-labelledby="v-pills-day-11-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">6:45PM - 7:30PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In attition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:30PM - 8:15PM</span>
                  <h2><a href="#">Mixed Martial Arts (MMA)</a></h2>
                  <p>This comprehensive class teaches the fundamentals as well as the advanced techniques of MMA. </p>
                  <p>Erik Paulson's Combat Submission Wrestling (CSW) will also be taught. </p>
                  <p>Beginner to Professional levels are welcome.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">MMA Coach</span></h3>
                </div>
              </div>
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/pat-swan-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">7:15PM - 8:15PM</span>
                  <h2><a href="#">Boxing</a></h2>
                  <p>All experience levels are welcome to attend this class taught by professional boxer, Pat Swan. </p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Pat Swan</a> <span class="position">Boxing Coach</span></h3>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="v-pills-13" role="tabpanel" aria-labelledby="v-pills-day-13-tab">
              <div class="coach-wrap ftco-animate d-sm-flex">
                <div class="img coach-img" style="background-image: url(/images/tim-mousel-profile.jpg);"></div>
                <div class="text pl-md-5">
                  <span class="time">12:00PM - 12:45PM</span>
                  <h2><a href="#">Muay Thai Kickboxing</a></h2>
                  <p>In addition to learning brutally effective kicking, punching, elbow and knee techniques, you can expect a great workout from this fun class.</p>
                  <h3 class="coach-name">&mdash; <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>