前端基础【小米商城从主页点击登陆/注册按钮跳转至各自的页面】超简单实现

---

前言

先看看小米商城首页的顶部以及其实现

<!-- 导航栏1 -->
    <div class="nav-box">
        <div class="w">
            <ul class="nav-xl">
                <!-- <a href="#">XXXX</a> 
                        该标签是用来规定链接指向的页面的 URL  存放超链接
                        效果：点击XXXX后能跳转到指定内容的新页面-->
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MUI</a></li>
                <li><a href="#">loT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星数科</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li id="download">
                    <a href="#">下载APP</a>
                    <i></i>
                    <div class="download">
                        <a href="#">
                            <img src="./image/主页图片/xiaomi-android.png" alt="">
                            小米商城APP
                        </a>
                    </div>
                </li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">Select Location</a></li>

            </ul>
            
            <div class="nav-xr">
                <form action="XXXXXXX.html">
                    <input type="submit" value="登录" name="login" id="indexDL">
                    <input type="submit" value="注册" name="register"id="indexZC">
                </form>
                <li><a href="#">消息通知</a></li>
                <li id="gwc">
                    <span class="glyphicon glyphicon-shopping-cart gwc">购物车(0)</span>
                    <div class="gwc-box">购物车中还没有商品,赶紧选购吧！</div>
                </li> 

            </div>
        </div>
    </div>

重点注意这一块：

<form action="XXXXX.html">
                    <input type="submit" value="登录" name="login" id="indexDL">
                    <input type="submit" value="注册" name="register"id="indexZC">
                </form>

一、form ——表单域

• from概述
  表单域是一个包含表单元素的区域。
  在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。
  <form> 会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
    <!-- 各种表单元素控件 -->
</form>

1.1 form的属性与html网址特性

在这里需要知道form中的action属性是与url地址传输有关。

其次，html：简单解释，?代表一种条件。一个接口。后面是种数据，这个数据要传输到这个网页中。
网页根据问号后面的条件中的数据来调取相应的网页。如下图：
我们可以通过

• 由此，我们可以通过点击主页的登陆/注册按钮，再在js文件中获取到点击后传输的网址（只需要？后面的字符进行判断即可）
  • 如以上案例：
  • ？后是 l ,即跳转至登陆页面
  • ？后是 r ,即跳转至注册页面

二、跳转需要用到的方法及解决方案

• location.href 是获取当前页面地址
• indexOf() 是获取根据字符获取字符串中第一个该字符的索引号
• charAt() 是根据索引号获取字符串中该索引号的字符

因此我们js代码可以这样写：

// 从主页点击登陆/注册按钮跳转至各自页面的具体实现
function shouyeTC(){
    // 通过id获取到各自那一块的元素坐标
    var lidownload3 = document.querySelector('#registerDL');
    var lidownload4 = document.querySelector('#registerZC');

    //获取从主页点击进来的网址信息
    var temp = location.href;
    // 获取网址中问号的索引位置
    var num = temp.indexOf('?') + 1;//问号后第一个字符的索引
    // 根据索引位置进行字符判断
    if (temp.charAt(num) == 'l') {
        choose2();
        lidownload4.style.display = "none";
        lidownload3.style.display = "block";
    }
    if (temp.charAt(num) == 'r') {
        choose1();
        lidownload3.style.display = "none";
        lidownload4.style.display = "block";
    }
}

如有相关document方法请前往另一篇前端基础—DOM进行参考