复制
收藏
提问
简洁
1个月前
<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登 录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注 册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block';
全网
文档
学术
百科
知识库
回答简洁模式
深入研究一些
看起来你正在尝试编写一个网页的登录和注册界面，并且已经包含了一些基本的HTML和CSS代码。你的JavaScript代码片段似乎是用来切换登录和注册表单的显示状态。不过，你的JavaScript代码中存在一些错误和不规范的地方，我将帮你修正并提供一些改进建议。
-
你的
for循环中给a元素设置了id属性，这是不必要的，因为a元素已经通过i变量在循环中被区分开了。 -
你的
onclick事件处理器应该使用addEventListener方法来添加，这样可以避免多次绑定同一个事件。 -
你的
onclick事件处理器中，应该使用this.id来获取当前点击的a元素的索引，而不是直接使用this。 -
你的
input元素的type属性在注册表单中被重复使用了，这可能会导致样式或功能上的冲突。 -
注册表单中的密码字段使用了
type="text"，这通常不是推荐的做法，因为密码应该隐藏输入内容，使用type="password"更为合适。
下面是根据上述建议修改后的JavaScript代码：
window.onload = function () {
// 获取需要的标签
let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');
let contents = document.getElementsByClassName('dom');
// 遍历并为每个a元素添加点击事件
for (let i = 0; i < as.length; i++) {
let a = as[i];
// 使用addEventListener添加点击事件
a.addEventListener('click', function () {
// 让所有的a的class都清除
for (let j = 0; j < as.length; j++) {
as[j].className = '';
contents[j].style.display = 'none';
}
// 设置当前a的class
this.className = 'current';
// 显示对应的内容区域
contents[this.id].style.display = 'block';
});
}
};
请注意，这段代码假设你的HTML结构是正确的，并且current类在CSS中已经定义好了，用于突出显示当前选中的标签。同时，确保你的CSS文件./css/login.css已经被正确链接，并且包含了必要的样式定义。
你觉得结果怎么样？