Bootstrap 4:从标签内打开标签(第二个链接)
我正在使用Bootstra 4选项卡导航,如下所示:
我现在想要使用第一个选项卡内容窗格中的链接从第一个窗格外部打开第三个链接窗格。
如果我使用选项卡导航中的链接(带有数据属性),则它不起作用。 有没有办法用第二个链接打开标签?
下面的解决方案基于你在我引用的答案中已经看到的解决方案,但是这个解决方案正在扩展到你想要合并的滚动function。
从本质上讲,使用本机Element.scrollIntoView()
javascript方法可以轻松实现scroll-to。
注意:在示例中,我为选项卡添加了一些边距,以便更好地展示function。
$('.tab-link').on('click', function(event) { // Prevent url change event.preventDefault(); // `this` is the clicked 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; }