欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

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('?')[1];

console.log(tmp1);

var tmp2 = tmp1.split('%')[0];

console.log(tmp2);

var tmp3 = tmp2.split('=')[1];

console.log(tmp3);

suibian = tmp3;

//以上步骤都是当跳转过来的页面里面网站进行分解得到最后的id名字

}

if (suibian == 'denglu') {

row1[0].style.display = 'block';

lis[1].className = '';

row1[1].style.display = 'none';

} else {

lis[0].className = '';

row1[0].style.display = 'none';

lis[1].className = 'current';

row1[1].style.display = 'block';

}


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.dgznd.com.cn 关注: 时间:2022-10-21 22:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLrumen/20221021/16954.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧