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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64776.shtml

张贴在3