如何通过我的web应用程序中的链接加载选项卡？

Question

首先感谢您的时间。

问题：我试图链接到个人资料页面上，从多个不同的地方我的web应用程序，我怎么能有一个按钮重定向到这个页面上的某些选项卡？

<div class="row"> 
<div class="col-lg-12"> 
    <div class="card card-tab"> 
    <div class="card-header"> 
     <ul class="nav nav-tabs"> 
     <li role="tab1" class="active"> 
      <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Profile</a> 
     </li> 
     <li role="tab2"> 
      <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Alerts</a> 
     </li> 
     <li role="tab3"> 
      <a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Settings</a> 
     </li> 
     <sec:authorize access="hasRole('ADMIN')"> 
     <li role="tab4"> 
      <a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Admin</a> 
     </li> 
     </sec:authorize> 
     </ul> 
    </div> 

当我点击一个标签，我可以看到它会修改URL到然而/型材＃TAB1/2/3等链接直接只显示个人资料页面。

https://github.com/symonk/Release-Management/blob/master/Releases/src/main/webapp/WEB-INF/views/profile.jsp

我猜一些JavaScript会做的伎俩，但即时通讯真的不知道从哪里开始

Answer 1

我浏览你给的链接，你用引导的标签，我注意到你也使用jQuery。 您的解决方案可能是在URL中使用锚点并基于此激活选项卡。 例如，如果你去http://sample-env.qp3bsthmnq.eu-west-2.elasticbeanstalk.com/profile#tab3

在代码中已经添加了这个之后：

var loadTab = function() { 
    var tabId = location.hash; 
    if(tabId !== undefined && $('.nav-tabs a[href="' + tabId + '"]') !== undefined) { 
     $('.nav-tabs a[href="' + tabId + '"]').tab('show'); 
    } 
}; 

$(document).ready(function() { 
    loadTab(); 
}); 

这必须已经激活的标签ID为＃TAB3