网络编程
位置：首页>> 网络编程>> JavaScript>> 使用classList来实现两个按钮样式的切换方法

使用classList来实现两个按钮样式的切换方法

作者：ZMONE　　发布时间：2024-04-16 09:35:19　

标签：使用classList来实现两个按钮样式的切换

classList属性的方法：add();remove();toggle();

描述，在一些页面我们需要使用两个按钮来回切换，如图：

使用classList来实现两个按钮样式的切换方法

我们要使用到add()和remove()方法

html部分:


<div class="login-title">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya2" id="myaa" onclick="myonclick1()">登陆</a>
</div>

js部分:


funcction myonclick(){
document.getElementById("mya").classList.remove("newClassName1");
document.getElementById("myaa").classList.remove("newClassName");
}
function myonclick1(){
document.getElementById("mya").classList.add("newClassName1");
document.getElementById("myaa").classList.add("newClassName");
}

css部分:


.login-title{
width:200px;
height:200px;
margin: 0 auto;
background-color:antiquewhite;
}
.mya2{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
.mya1{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName1{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}

使用classList来实现两个按钮样式的切换方法

来源：https://www.cnblogs.com/ZM-ONE/archive/2018/01/23/8337403.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com