从外部链接到“引导程序”选项卡-如何将选项卡设置为“活动”？

小编典典

从外部链接到“引导程序”选项卡-如何将选项卡设置为“活动”？

css

我有一个带有3个不同内容选项卡的Bootstrap“选项卡”导航。除了我要从选项卡导航之外链接到其中一个选项卡之外，它的工作原理都是完美的。这意味着当某人单击选项卡窗口外部的链接时，应将其设置为“活动”该选项卡并显示其内容。

现在，它正确显示了该选项卡的内容，但是该选项卡未设置为“活动”。我如何实现这一点，以使其像有人单击一样“活跃”？

这是代码：

<div>
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<p></p>

<a href="#profile" data-toggle="tab">Profile Link From Outside</a>

非常感谢您的帮助或提示:)

阅读 297

2020-05-16

共1个答案

小编典典

您可以做一个小技巧来实现：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

2020-05-16