我有2个html页面。 第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>
非常感谢
答案 0 :(得分:0)
您可以使用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>