CSS应用classList完成两个按钮款式的切换

日期:2021-03-17 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

classList特性的方式:add();remove();toggle();

叙述,在1些网页页面大家必须应用两个按钮往返切换,如图:

大家要应用到add()和remove()方式

html一部分:

<div class="login-title">
<a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">申请注册</a>
<a href="javascript:void(0)" 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;
}

总结

以上所述是网编给大伙儿详细介绍的CSS应用classList完成两个按钮款式的切换,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!