首頁 > web前端 > js教程 > classList如何實作兩個按鈕樣式切換

classList如何實作兩個按鈕樣式切換

亚连
發布: 2018-06-09 17:22:41
原創
1623 人瀏覽過

下面我就為大家分享一篇使用classList來實現兩個按鈕樣式的切換方法,具有很好的參考價值,希望對大家有幫助。

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

描述,在某些頁面我們需要使用兩個按鈕來回切換,如圖:

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

html部分:

<p 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>
</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;
}
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

如何使用babel安裝設定教學

#在vue-cli中如何設定babel設定檔

使用node.js實作抖音自動搶紅包功能

#使用webpack打包處理bundle.js檔案過大的問題

在javascript中如何實作填滿預設頭像

以上是classList如何實作兩個按鈕樣式切換的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板