您的位置：首页 > 运维架构 > 网站架构

A网站跳转B网站并传值-----window.open

2017-03-02 17:15 330 查看

A网站跳转B网站并传值-----window.open

意思如图：

这里我们做一个名字为A.html和B.html实现该效果的demo，其中用到window.open（）的方式进行传值。

A.html源码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>A页面点击a后主跳转</title>
</head>
<style>
div {
width: 400px;
height: 50px;
margin: 100px auto;
}
a {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 18px;
text-align: center;
}
a:nth-child(1) {
background: red;
}
a:nth-child(2) {
background: orange;
}
a:nth-child(3) {
background: green;
}
a:nth-child(4) {
background: pink;
}
</style>
<body>
<div>
<a onclick="ulrHtml(1)">B链接1选项</a>
<a onclick="ulrHtml(2)">B链接2选项</a>
<a onclick="ulrHtml(3)">B链接3选项</a>
<a onclick="ulrHtml(4)">B链接4选项</a>
</div>
<script>
function ulrHtml(num) {
var toUrl = "B.html?" + num
window.open(toUrl);
}
</script>
</body>
</html>

B.html源码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>B被跳转的子页面</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<style>
ul {
width: 400px;
height: 50px;
margin: 100px auto;
}
ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 18px;
text-align: center;
}
.on {
background: red;
}
</style>
</head>
<body>
<ul id="tab">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<script>
setTimeout(function(){
var location = window.location.href;
var href = location + "";
var href_part = href.split('?');
var num = (href_part[1]) * 1;
$('#tab li:nth-child(' + num + ')').addClass('on');
});
</script>
</body>
</html>

好了，这时候可以测试下了~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 javascript

相关文章推荐

新的分享

章节导航