如何通過jquery鏈接到特定的選項卡

Question

我有2個html頁面。 Page 1有3個包含內容的選項卡。當我點擊標籤3時，有一個鏈接將我帶到新頁面。在新的頁面上有一個「返回」按鈕，當我點擊該按鈕時，它使我回到上一頁，但是，選項卡＃1處於活動狀態。有沒有辦法讓我點擊「返回」按鈕，選項卡＃3被激活，而不是選項卡＃1。

enter code here 
    //page 1: 
    <ul class="nav nav-tabs tabSet" role="tablist" id="myTab"> 
    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">tab2</a></li> 
    <li><a href="#tab-2" role="tab" data-toggle="tab">tab2</a></li> 
    <li><a href="#tab-3" role="tab" data-toggle="tab" id="up">tab3</a> </li> 

//page 2: 
    enter code here <input type="button" id="`Button" name="returnButton" value="Return to Report" onclick="returnToPrevious()" class="btn btn-primary" /> 

    <script type="text/javascript"> 
    function returnToPrevious() 
{ 
    parent.history.back(); 
    return false; 
} 
</script> 

千恩萬謝

Answer 1

你可以做到這一點的URL查詢字符串玩：如果URL中含有一定的參數，然後激活第三個選項卡。

假設第一頁被稱爲first-page.html，你可以改變第二頁的JavaScript代碼是這樣的：

<script type="text/javascript"> 

function returnToPrevious() 
{ 
    location.href = "first-page.html?back=yes"; 
    return false; 
} 

</script> 

並在第一頁，你可以活躍在第一或第三臺評估，如果back=yes部分存在或不存在於網址中：

<!-- Notice that the class "active" is not present, because it will be managed in the javascript --> 
<ul class="nav nav-tabs tabSet" role="tablist" id="myTab"> 
    <li><a href="#tab-1" role="tab" data-toggle="tab">tab1</a></li> 
    <li><a href="#tab-2" role="tab" data-toggle="tab">tab2</a></li> 
    <li><a href="#tab-3" role="tab" data-toggle="tab" id="up">tab3</a></li> 
</ul> 


<script type="text/javascript"> 

// Function that takes a param value from the query string of the url 
// source: https://css-tricks.com/snippets/javascript/get-url-variables/ 
function getQueryStringVariable(variable) 
{ 
    var queryString = window.location.search.substring(1); 
    var vars = queryString.split("&"); 
    for (var i=0;i<vars.length;i++) { 
     var pair = vars[i].split("="); 
     if(pair[0] == variable){ 
      return pair[1]; 
     } 
    } 
    return false; 
} 


// Checks if the "back=yes" part in the url is present 
var back = getQueryStringVariable("back"); 
if (back === "yes") 
{ 
    $("a[href=#tab-3]").addClass("active"); 
} 
else 
{ 
    $("a[href=#tab-1]").addClass("active"); 
} 

</script>