JavaScript制作页面跳转效果
我们的需求：当点击“登录”或者“注册”能跳转到我们想要的那个页面：
比如，当点击“登录”
就跳转到登录页面：
当点击“注册”
就跳转到注册页面：
在HTML代码如下：
<ul>
<li>
<a href="javascript:;" value="登录" id="denglu" class="dl">登录</a>
<!-- id='denglu'就是用来判断最后获取到的值是否为-->
</li>
<li>
<a href="javascript:;" value="登录" id="logon" class="zc">注册</a>
</li>
</ul>
在JavaScript代码如下：
function load11() {
//用一个函数进行“登录”封装
var parm1 = document.getElementById('denglu').id;
var myurl = 'load.html' + '?' + 'parm1=' + parm1;
//myurl这个变量是用来装跳转的页面load.html和登录的链接里的id值
window.location.assign(myurl);
}
function logon11() {
//用一个函数进行“注册”封装
var parm2 = document.getElementById('logon').id;
var myurl = 'load.html' + '?' + 'parm2=' + parm2;
window.location.assign(myurl);
}
//注册一个点击事件，当点击这个登录的字就调用函数能进行跳转
var dl = document.querySelector('.dl');
dl.addEventListener('click', function() {
load11();
})
var zc = document.querySelector('.zc');
zc.addEventListener('click', function() {
logon11();
})
当跳转到登录界面的时候的Javascript里面的代码：
var suibian = null;
getparm();
function getparm() {
var url = location.href;
console.log(url + '21111');
var tmp1 = url.split('?');
console.log(tmp1);
var tmp2 = tmp1.split('%');
console.log(tmp2);
var tmp3 = tmp2.split('=');
console.log(tmp3);
suibian = tmp3;
//以上步骤都是当跳转过来的页面里面网站进行分解得到最后的id名字
}
if (suibian == 'denglu') {
row1.style.display = 'block';
lis.className = '';
row1.style.display = 'none';
} else {
lis.className = '';
row1.style.display = 'none';
lis.className = 'current';
row1.style.display = 'block';
}
页:
[1]