使用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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript getElementsByClassName函數(shù)
- js document.getElementsByClassName的使用介紹與自定義函數(shù)
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript getElementsByClassName 和js取地址欄參數(shù)
- javascript getElementsByClassName實現(xiàn)代碼
- Javascript 多瀏覽器兼容性問題及解決方案
- IE8的JavaScript點擊事件(onclick)不兼容的解決方法
- JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
- JavaScript中解決多瀏覽器兼容性23個問題的快速解決方法
- JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
相關(guān)文章
這篇文章主要介紹了JS異步函數(shù)隊列功能,結(jié)合實例形式分析了異步函數(shù)隊列的應(yīng)用場景、實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
基于Bootstrap的標簽頁組件及bootstrap-tab使用說明
這篇文章主要介紹了基于Bootstrap的標簽頁組件及bootstrap-tab使用說明,需要的朋友可以參考下2017-07-07
在web開發(fā)中，經(jīng)常需要開發(fā)“下載”這一模塊,下面使用java、javascript實現(xiàn)附件下載,需要的朋友可以參考下2014-08-08
一文詳解JavaScript中的replace()函數(shù)
replace方法的語法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面這篇文章主要給大家介紹了關(guān)于JavaScript中replace()函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Javascript中的方法和匿名方法,以實例形式較為詳細的分析了javascript中方法及匿名方法的定義與使用技巧,需要的朋友可以參考下2015-06-06
解析利用javascript如何判斷一個數(shù)為素數(shù)
本文主要分享了利用javascript如何判斷一個數(shù)為素數(shù)的具體實例代碼，有需要的朋友可以作為參考看下2016-12-12
這篇文章主要介紹了微信小程序發(fā)送短信驗證碼完整實例，實現(xiàn)發(fā)送短信驗證碼，帶60秒倒計時功能，無需服務(wù)器端，非常具有實用價值，需要的朋友可以參考下2019-01-01
下面小編就為大家?guī)硪黄獙τ趈s垃圾回收機制的理解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js讀取 EXCEL 文件 的實現(xiàn)代碼，比較全了大家可以自行測試了。2009-08-08
JavaScript實現(xiàn)數(shù)組在指定位置插入若干元素的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04