登陆选择 要求:单击登录选择的两种方式,显示不同的登录方式页面,且样式进行改变
时间: 2024-02-26 13:54:47 浏览: 21
可以使用JavaScript监听登录选择的点击事件,根据点击的不同方式,将对应的登录方式页面显示出来,并修改样式。具体代码如下:
HTML部分:
```html
<div id="loginSelect">
<button id="loginByAccountBtn">账号登录</button>
<button id="loginByPhoneBtn">手机号登录</button>
</div>
<div id="loginByAccount" class="login-box">
<!-- 账号登录页面的内容 -->
</div>
<div id="loginByPhone" class="login-box">
<!-- 手机号登录页面的内容 -->
</div>
```
CSS部分:
```css
.login-box {
display: none;
/* 其他样式 */
}
.login-box.show {
display: block;
}
```
JavaScript部分:
```javascript
// 获取登录选择和登录方式页面元素
const loginSelect = document.getElementById('loginSelect');
const loginByAccount = document.getElementById('loginByAccount');
const loginByPhone = document.getElementById('loginByPhone');
// 监听登录选择的点击事件
loginSelect.addEventListener('click', (event) => {
const clickedBtn = event.target;
if (clickedBtn.id === 'loginByAccountBtn') {
// 点击了账号登录按钮
loginByAccount.classList.add('show');
loginByPhone.classList.remove('show');
clickedBtn.classList.add('active');
document.getElementById('loginByPhoneBtn').classList.remove('active');
} else if (clickedBtn.id === 'loginByPhoneBtn') {
// 点击了手机号登录按钮
loginByAccount.classList.remove('show');
loginByPhone.classList.add('show');
clickedBtn.classList.add('active');
document.getElementById('loginByAccountBtn').classList.remove('active');
}
});
```
这段代码会监听登录选择的点击事件,根据点击的不同按钮,将对应的登录方式页面显示出来,并将点击的按钮样式修改为激活状态。通过设置`.login-box.show`的样式,可以实现显示和隐藏登录方式页面。