这种要求怎么搞？大神进来看看...

liuyang7758 · 发表于 2016-12-5 09:49:58

有一个a.html 页面里面有连接到b.html 页面....但如果是单纯的跳转就不问了...

b.html 页面是一个效果页面...左右滚动切换的....而a.html页面相关的内容是在 b .html的第二屏....

疑问就是如何从a.html点击连接的时候跳转b.html页面的第二屏....而且不要影响b.html效果........

A.html 页面

提示：您可以先修改部分代码再运行

B.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://zhuanti.chla.com.cn/2014/03/nv/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<style type="text/css">
/*全局复写*/
body{font-family:"Microsoft YaHei"; font-size:12px; background:#030304; overflow-x:hidden;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0}
fieldset,img {border:0; vertical-align:bottom;}
address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}
ol,ul{list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%}
abbr,acronym {border:0}
button,input,select,textarea{font-size:100%; cursor:pointer;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input{border:none;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{clear:both; line-height:0px; height:0px; font-size:0px;}
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{border:none;padding:0;}
a{text-decoration:none;}
.fl{float:left;}
.fr{float:right;}

.warpWt{width:1920px; height:900px; position:relative; overflow:hidden;}
.tabcon{width:9600px; height:815px; overflow:hidden; position:relative;}
.tabcon .subbox{position:absolute;}
.tabcon .subbox .sublist{width:1920px; height:815px; float:left; position:relative;}
.tabcon .subbox .sublist p{height:815px;}
.tabcon .subbox .sublist p.warpBg1{background:url(images/bg1.jpg) no-repeat;}
.tabcon .subbox .sublist p.warpBg2{background:url(images/bg2.jpg) no-repeat;}
.tabcon .subbox .sublist p.warpBg3{background:url(images/bg3.jpg) no-repeat;}
.tabcon .subbox .sublist p.warpBg4{background:url(images/bg4.jpg) no-repeat;}
.tabcon .subbox .sublist p.warpBg5{background:url(images/bg5.jpg) left no-repeat;}

.warpDiv{width:1440px; height:815px; background:#000000; margin:0px auto; overflow:hidden; position:relative; color:#000; font-size:28px; background:#CCC;}
.dddd{position:absolute; top:300px; left:-3000px; width:100px; height:300px; background:#F00;}
.pic3a{position:absolute; top:300px; right:-3000px; width:200px; height:300px; background:#0000FF;}
.pic3b{position:absolute; top:-300px; left:-3000px; width:240px; height:240px; background:#00FF00;}

.menubox{width:100%; height:84px; border-top:1px solid #1f1f1f; margin-top:25px;}
.menubox .tabbtn{padding-left:110px;}
.menubox .tabbtn li{width:150px; height:80px; float:left; margin-left:150px; margin-top:-7px;}
.menubox .tabbtn li a{width:150px; height:80px; float:left; color:#fff; text-align:center; font-size:18px; padding-top:16px; background:url(images/ico.jpg) 66px 0px no-repeat;}
.menubox .tabbtn li a span{font-size:9px; color:#58534c; display:block;}
.menubox .tabbtn li.current a{color:#F00; background:url(images/icohover.jpg) 66px 0px no-repeat}

</style>

<div class="warpWt">	
    <div class="tabcon" id="leftcon">
        <div class="subbox">
            <div class="sublist">
				<div class="warpDiv">
                  	11111内容
                </div>         	
            </div>
            <div class="sublist">
                <div class="warpDiv">
                    2222222内容
                </div>
            </div>
            <div class="sublist">
                <div class="warpDiv">
                    3333333内容
                </div>	
            </div>
            <div class="sublist">
                <div class="warpDiv">
                    4444444内容
                </div>
            </div>
            <div class="sublist">
                <div class="warpDiv">
                    5555555内容
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="menubox">
         <ul class="tabbtn" id="menu">
            <li id="one1" class="dd current"><a href="javascript:;">块1导航<span>Trailer</span></a></li>
            <li id="one2" class="dd" ><a href="javascript:;">块2导航<span>Introduction</span></a></li>
            <li id="one3" class="dd"><a href="javascript:;">块3导航<span>picture</span></a></li>
            <li id="one4" class="dd"><a href="javascript:;">块4导航<span>news</span></a></li>
            <li id="one5" class="dd"><a href="javascript:;">块5导航<span>RESERVATION</span></a></li>
        </ul>
    </div>
</div>

})(jQuery);

$(document).ready(function($){
	$("#menu").tabso({
		cntSelect:"#leftcon",
		tabEvent:"click",
		tabStyle:"move-animate",
		aniSpeed:400,
		direction : "left"
	});

});

</script>
</body>
</html>

提示：您可以先修改部分代码再运行

jianwang19 · 发表于 2016-12-5 09:49:59

带参过去。
A页面链接：

<a href="b.html?page=1">B</a>

复制代码

B页面获取page：

$.getUrlParam = function(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var page = $.getUrlParam('page') || 0;
//第152行改为
$menus.eq(page)[ opts.tabEvent ]();

复制代码

liuyang7758 · 发表于 2016-12-5 17:26:35

jianwang19 发表于 2016-12-5 17:03
带参过去。
A页面链接：

还真能实现....可惜代码完全看不懂...道行还是浅......有个疑问现在点击B.html页面第三导航或者其它导航在刷新页面因为是带着参数的问题...一直回到导航二...这能取消吗..

就是从a.html页面过来带这参数...如果点击其它导航参数能取消不...因为现在只要带这参数刷新页面不会回到导航一，会一直在导航二呆着...

jianwang19 · 发表于 2016-12-5 18:22:53

那就用location.hash。
A页面：

<a href="b.html#1">B</a>

复制代码

B页面获取hash：

var hash = window.location.hash;
var rex = /\#/;
var page = hash.replace(rex,'');
if(page == 1){
window.location.hash = '';
}else{
page = 0;
}
//第152行改为
$menus.eq(page)[ opts.tabEvent ]();

复制代码

其实你的页面内部链接不要用相对路径就可以了。

feilady · 发表于 2016-12-11 10:05:29

get 参数到B页面就行了

帐号		自动登录	找回密码
密码			注册

[讨论] 这种要求怎么搞？大神进来看看...

最佳答案