首页 > web前端 > css教程 > classList实现两个按钮样式的切换实例分享

classList实现两个按钮样式的切换实例分享

小云云
发布: 2018-01-27 10:08:12
原创
1849 人浏览过

本文主要和大家分享CSS使用classList实现两个按钮样式的切换效果,在一些页面我们需要使用两个按钮来回切换,怎么实现这样的功能呢?需要的朋友跟随脚本之家小编一起学习吧。

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

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

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

html部分:


<p 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>
</p>
登录后复制

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;
}
登录后复制

相关推荐:

HTML5的classList属性操作CSS类的使用详解

classlist的9篇内容推荐

HTML5中classList属性

以上是classList实现两个按钮样式的切换实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板