网页制作 
首页 > 网页制作 > 浏览文章

CSS使用classList实现两个按钮样式的切换

(编辑:jimmy 日期: 2024/12/25 浏览:3 次 )

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

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

CSS使用classList实现两个按钮样式的切换

我们要使用到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实现两个按钮样式的切换

CSS使用classList实现两个按钮样式的切换

总结

以上所述是小编给大家介绍的CSS使用classList实现两个按钮样式的切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

上一篇:好的 CSS 命名规范可以节约 Debug 时间
下一篇:CSS实现DIV居中的三种方法