如何通过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>