0


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

以上的内容就是所有的代码片段,所需代码可自取!

标签: javascript html

本文转载自: https://blog.csdn.net/m0_60264901/article/details/122209688
版权归原作者 实习期小潘 所有, 如有侵权,请联系我们删除。

“JavaScript制作页面跳转效果”的评论:

还没有评论