如何通过jquery链接到特定的选项卡
问题描述:
我有2个html页面。 Page 1有3个包含内容的选项卡。当我点击标签3时,有一个链接将我带到新页面。在新的页面上有一个“返回”按钮,当我点击该按钮时,它使我回到上一页,但是,选项卡#1处于活动状态。有没有办法让我点击“返回”按钮,选项卡#3被激活,而不是选项卡#1。如何通过jquery链接到特定的选项卡
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>
千恩万谢
答
你可以做到这一点的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>