【发布时间】：2019-10-30 18:00:46
【问题描述】：
在手机上查看我的页面时，用户点击了一个标签，但无法知道它已打开，因为它位于下方，需要滚动才能查看。
当用户单击选项卡时，我希望它自动滚动到打开的内容。
我已尝试遵循此处的解决方案，但无法使其适用于我的特定页面： 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">— <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">— <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">— <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">— <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">— <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">— <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">— <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">— <a href="instruct.php">Tim Mousel</a> <span class="position">Muay Thai Instructor</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>【问题讨论】：
-
@SaiManoj 我看到它非常相似，我尝试使用您的 javascript，但我对 javascript 的了解不足，无法进行适当的编辑以将其应用于本示例中的 html 代码。谢谢。
-
没问题，学习愉快:)
标签： jquery bootstrap-4 tabs