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

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

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

我们要使用到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来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。