好訊息!!好訊息!!

頁面的跳轉完全自動化
讓我來幫你解放你的雙手
不用繁瑣的讓自己動手點擊啦~
我們的學習是為了讓代碼更簡潔效果更優!
現在就讓我們開始吧~
我們的需求:

當點擊“登錄”或者“注冊”能跳轉到我們想要的那個頁面:
比如,當點擊“登錄”
就跳轉到登錄頁面:

當點擊“注冊”
就跳轉到注冊頁面:

在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';
}
以上的內容就是所有的代碼片段,所需代碼可自取!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/398705.html
標籤:其他
上一篇:Vue實作 TodoList
