JavaScript跳转到指定页面并且到指定的tab切换窗口

标签：第一个   布局   效果   exp   dex   nes   addclass   cat   targe   

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>

JavaScript跳转到指定页面并且到指定的tab切换窗口

标签：第一个   布局   效果   exp   dex   nes   addclass   cat   targe   

原文地址：http://www.cnblogs.com/qianduancainiao/p/6666465.html