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';
    }

 

---

以上的內容就是所有的程式碼片段，所需程式碼可自取！