CSS使用classList實現(xiàn)兩個按鈕樣式的切換
發(fā)布時間：2018-01-24 10:53:28 作者：ZMONE 
我要評論
我要評論在一些頁面我們需要使用兩個按鈕來回切換，怎么實現(xiàn)這樣的功能呢？下面小編給大家?guī)砹薈SS使用classList實現(xiàn)兩個按鈕樣式的切換效果，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
classList屬性的方法：add();remove();toggle();
描述，在一些頁面我們需要使用兩個按鈕來回切換，如圖：
我們要使用到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;
}
總結(jié)
以上所述是小編給大家介紹的CSS使用classList實現(xiàn)兩個按鈕樣式的切換，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
怎樣實現(xiàn)H5+CSS3手指滑動切換圖片的示例代碼
這篇文章主要介紹了怎樣實現(xiàn)H5+CSS3手指滑動切換圖片的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2019-05-05
本文通過實例代碼給大家介紹了css實現(xiàn)導(dǎo)航切換效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-15
這篇文章主要介紹了用CSS實現(xiàn)Tab頁切換效果的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-19- 這篇文章主要介紹了CSS實現(xiàn)Tab頁切換實例代碼,需要的朋友可以參考下2018-01-31
這篇文章主要介紹了純CSS3制作頁面切換效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-30
