使用classList来实现两个按钮样式的切换方法
程序员文章站
2022-04-29 12:15:25
classlist属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到add()和rem...
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来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 详解微信第三方小程序代开发
下一篇: php中通用的excel导出方法实例