我正在使用 Bootstra 4 选项卡导航,如下所示:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<a href="">LINK TO THIRD TAB</a>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
我现在想使用第一个选项卡内容 Pane 中的链接从第一个 Pane 外部打开第三个链接 Pane 。
如果我使用选项卡导航中的链接(带有数据属性),它就不起作用。有没有办法打开带有第二个链接的选项卡?
最佳答案
以下解决方案基于您在我的 quoted answer 中已经看到的解决方案,但这一个扩展了您也想合并的滚动到功能。
本质上,滚动到可以通过 native Element.scrollIntoView()
轻松实现JavaScript 方法。
注意:在示例中,我在选项卡上留了一些边距,以便更好地展示功能。
$('.tab-link').on('click', function(event) {
// Prevent url change
event.preventDefault();
// `this` is the clicked <a> tag
var target = $('[data-toggle="tab"][href="' + this.hash + '"]');
// opening tab
target.trigger('click');
// scrolling into view
target[0].scrollIntoView(true);
});
#nav {
margin-top: 90vh;
}
#nav-tabContent {
margin-bottom: 90vh;
}
<nav id="nav">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<a class="tab-link" href="#nav-contact">LINK TO THIRD TAB</a>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
关于jquery - Bootstrap 4 : Open tab from inside a tab (second link),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48692280/