欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用classList來實現(xiàn)兩個按鈕樣式的切換方法

 更新時間：2018年01月24日 08:34:03   作者：ZMONE  
下面小編就為大家分享一篇使用classList來實現(xiàn)兩個按鈕樣式的切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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來實現(xiàn)兩個按鈕樣式的切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論