JavaScript跳轉到指定頁面而且到指定的tab切換窗口

JavaScript跳轉到指定頁面而且到指定的tab切換窗口

案例的解析就是點擊A頁面的第一個的切換窗口的按鈕跳轉到B頁面，再點擊B頁面的按鈕跳轉到A頁面的第二個窗口，這個實現的效果有三種方法，下面的圖片案例：

A頁面的第一個切換窗口

B頁面的跳轉按鈕

A頁面的第二個切換窗口

 

第一方法用函數function；

演示效果：JavaScript跳轉到指定頁面而且到指定的tab切換窗口

A頁面按鈕

<a href="b.html?id=1980&order_type=p_order">aaaaa</a>

B頁面按鈕代碼：
<input type="button" value="按鈕" onclick="submit_success()" />
<input type="text" maxlength="6" />
<script>
function submit_success() {
var order_type_new = "p_order";
var Request = new UrlSearch(); //實例化
var order_type = Request.order_type;
if(order_type == '' || order_type == null){ //若是沒有傳 order_type ,就追加上order_type 而後返回
location.href = document.referrer+"?order_type="+"p_order";
}else{
if(order_type_new == order_type){ //若是新的order_type 和 來源的order_type 一致。那麼直接返回
location.href=document.referrer;
}else{ //不然更新成新的 order_type
var num = document.referrer.indexOf("?")
var url_no_parameter = document.referrer.substr(0,num);
location.href = url_no_parameter+"?order_type="+"p_order";
}
}

return;
}

//初始化url地址

function UrlSearch(){
var name,value;
var str = document.referrer; //url地址

var num = str.indexOf("?");
str = str.substr(num+1); //取得全部參數 stringvar.substr(start [, length ]
var arr=str.split("&"); //各個參數放到數組裏
for(var i=0;i < arr.length;i++){
num=arr[i].indexOf("=");
if(num>0){
name=arr[i].substring(0,num);
value=arr[i].substr(num+1);
this[name]=value;
}
}
}

 

第二種方法用cookie存儲：

演示效果：JavaScript跳轉到指定頁面而且到指定的tab切換窗口

A頁面代碼

<div class="tabcont">
<div class="cont">
<input type="button" value="點擊跳轉頁面" />
<p>DIV+CSS是WEB設計標準，它是一種網頁的佈局方法。與傳統中經過表格（table）佈局定位的方式不一樣，它能夠實現網頁頁面內容與表現相分離。提起DIV+CSS組合，還要從XHTML提及。XHTML是一種在HTML（標準通用標記語言的子集）基礎上優化和改進的新語言，目的是基於XML應用與強大的數據轉換能力，適應將來網絡應用更多的需求。</p>
</div>
<div class="cont" style="display:none;">
<p>JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。</p>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$(".demo span").click(function(){
$(".demo span").removeClass("current");
$(this).addClass("current");
var index=$(".demo span").index(this);
$(".tabcont .cont").eq(index).show().siblings().hide();
})
$(".cont input").click(function(){
window.location.href="demo4.html"
})
var liId=$(".demo span:last-child").attr("id");
var keyId = getCookie("keyId");
if(keyId==liId){
$(".demo span:last-child").click();
}
})
function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

B頁面代碼：

<div class="btn">
<input type="button" id="btn" onclick="javascript:history.back(-1);" value="點擊按鈕返回上一頁" />
</div>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$(".btn").on("click","input#btn",function(){
setCookie("keyId", "front");
})
})
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

 

第三種方法用html5 sessionStorage存儲：

演示效果：JavaScript跳轉到指定頁面而且到指定的tab切換窗口

A頁面代碼：

<div class="demo">
<span class="current">前端菜鳥</span>
<span id="front">菜鳥前端</span>
</div>
<div class="tabcont">
<div class="cont">
<input type="button" value="點擊跳轉頁面" />
<p>DIV+CSS是WEB設計標準，它是一種網頁的佈局方法。與傳統中經過表格（table）佈局定位的方式不一樣，它能夠實現網頁頁面內容與表現相分離。提起DIV+CSS組合，還要從XHTML提及。XHTML是一種在HTML（標準通用標記語言的子集）基礎上優化和改進的新語言，目的是基於XML應用與強大的數據轉換能力，適應將來網絡應用更多的需求。</p>
</div>
<div class="cont" style="display:none;">
<p>JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。</p>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$(".demo span").click(function(){
$(".demo span").removeClass("current");
$(this).addClass("current");
var index=$(".demo span").index(this);
$(".tabcont .cont").eq(index).show().siblings().hide();
})
$(".cont input").click(function(){
window.location.href="demo2.html"
})
var liId=$(".demo span:last-child").attr("id");
var keyId = sessionStorage.getItem("keyId");
if(keyId==liId){
$(".demo span:last-child").click();
}
})

B頁面代碼

<div class="btn"><input type="button" id="btn" onclick="javascript:history.back(-1);" value="點擊按鈕返回上一頁" /></div><script src="jquery-1.11.1.js"></script><script>$(function(){$(".btn").on("click","input#btn",function(){sessionStorage.setItem("keyId", "front");setCookie("id","1");alert(getCookie("id"))})})</script>