點擊後更改按鈕樣式

我想要一個按鈕來改變它的外觀後，它被點擊並讓它保持這種方式。我已經嘗試使用「按鈕：焦點」的CSS，它會工作，但只要另一個按鈕或其他任何被點擊任何先前選擇的按鈕將回到它的原始樣式。點擊後更改按鈕樣式

我有默認的樣式集和懸停樣式集，但無法獲得訪問/單擊式樣留下。我不希望它回去，直到頁面重新加載。這是你不能用CSS來做的事情，必須用JS來實現嗎？

這將是一個有點冗長，但這裏是我到目前爲止有：

HTML：

<div style="text-align:center;"> 
    <button id=p1Button><span>Player One, please select me! </span></button> 
    <button id=p2Button><span>Player Two, please select me! </span></button> 
</div>

CSS：

button{ 
    width: 16em; 
    color: white; 
    background: #0392CF; 
    font-weight: 800; 
    font-size: 1.5em; 
    background-attachment: fixed; 
    border-radius: .25em; 
    cursor: pointer; 
    border: none; 
    margin: .5; 
    height: 2.2; 
    transition-duration: 1.5s; 
    transition-timing-function: linear; 
} 
button:hover { 
    color: white; 
    background: #F37736; 
    border-radius: 2em; 
    width: 13em; 
} 
button:hover span { 
    display: none; 
} 
button:hover:before { 
    content:"Clicky Clicky!"; 
    letter-spacing: .25em; 
} 
button:focus { 
    color: white; 
    background: #F37736; 
    border-radius: 2em; 
    width: 13em; 
} 
button:focus span { 
    display: none; 
} 
button:focus:before { 
    content:"Clicked!"; 
    letter-spacing: .25em; 
}

來源

2016-06-12 Alec Norvell

您將需要JS。與鏈接不同，「

您需要了解的重點是舞臺。每當元素失去焦點時，它就會變回舊式。你想實現的是由'點擊'事件觸發的。使用JS是處理它的最好方法。

document.getElementById('p1Button').addEventListener('click', onClick); 
document.getElementById('p2Button').addEventListener('click', onClick); 

function onClick(){ 
    this.className += ' YourClassHere'; 
}

此外我推薦你使用jQuery應該更方便。

來源

2016-06-12 23:37:51 Mengo

做到這一點的最好方法似乎是使用JavaScript。更簡單的方法是使用jQuery。

在js文件，把下面的代碼使用jQuery

$("#p1Button").click(function(){ 
    $(this).addClass("yourClassName"); 
});

這樣做，如果你不想使用jQuery，然後使用如下代碼和HTML中，給一個參考像<button onclick="clickedOnButton(this)" id=p1Button><span>Player One, please select me! </span></button>

function clickedOnButton(this) 
{ 
    this.className+='yourClassName'; 
}

功能添加一類在CSS文件過於

.yourClassName 
{ 
    /* Style to use when clicked on button. */ 
}

來源

2016-06-12 23:57:57

點擊後更改按鈕樣式

回答

相關問題