如何通過我的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