按鈕：使用JavaScript和CSS激活

嘗試使簡單的按鈕在點擊時處於活動的不同樣式。我使用HTML來設計按鈕，樣式爲CSS，並希望使用一些JavaScript來實現。按鈕：使用JavaScript和CSS激活

SO環顧四周，發現有很多不同的方法，如使用複選框使純CSS，或jQuery的，或JavaScript一個按鈕後，我覺得JavaScript的是，我期待在最貼近的方式。

HTML

<button type="button" class="btn" id="btn1">Details</button>

CSS

.btn { 
    background: #3498db; 
    border-radius: 0px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 12px; 
    padding: 2px 2px 2px 2px; 
    text-decoration: none; 
    height: 30px; 
    width: 70px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    display: block; 
} 

.btn:active { 
    background: #cecece; 
    text-decoration: none; 
}

的JavaScript

$('.btn').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active') 
    } else { 
     $(this).addClass('active') 
    } 
});

這裏是一個的jsfiddle鏈接：http://jsfiddle.net/w5h6rffo/

廣告ditional Note
功能目標是讓多個按鈕具有相同的類別，但每個按鈕都會調用不同的功能。我的函數調用的工作，只是沒有按鈕留在當第一次按下它的活動狀態，然後在非激活狀態時，再次按下

來源

2015-12-09 axchink

你接近這樣做是正確，你使用的檢查，看看你的元素具有active類是好的，但jQuery有一個toggleClass()功能，讓你剛建機制寫：

$('.btn').click(function() { 
    $(this).toggleClass('active'); 
});

然後在你的CSS，而不是造型的僞:active您將使用一個類的名稱，而不是像這樣：

.btn.active { 
    background: #cecece; 
    text-decoration: none; 
}

~~你還需要從產品總數的CSS刪除 :active選擇，因爲你將不再需要它~~ :)

由於dfsq指出存在保留:active一定值假想選擇器：

我只是認爲活動狀態（：活動）的控制元素是重要。例如，如果沒有它，按鈕將看起來是相同的，如果它被按下但不被點擊（鼠標懸停之前的鼠標懸停）。 UX有點更好：：active。 ~~但也許我太挑剔~~

出於這個原因，你可能要修改的選擇是：

.btn.active, .btn:active { 
    background: #cecece; 
    text-decoration: none; 
}

因爲這會影響雙方的.active和:active狀態。

來源

2015-12-09 18:55:42 SidOfc

*「你也想從你的CSS中移除：active selector所有，因爲你不會再需要它了「*。不，它**實際上仍然是需要的。 .active和：active都是必需的。效果更好。 – dfsq

d'oh！你的回答擊敗了我大約40秒。 – David

@dfsq這絕對不是必需的，它只會在用戶使用基於標籤的導航而不是鼠標時有所不同，因爲效果看起來不會更好，而是完全相同**所以*是的，你__can__刪除'：active'選擇器* – SidOfc

你可以使用classList.toggle（）連接到.active類。

所以您的代碼會是這個樣子：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
     .btn { 
      background: #3498db; 
      border-radius: 0px; 
      font-family: Arial; 
      color: #ffffff; 
      font-size: 12px; 
      padding: 2px 2px 2px 2px; 
      text-decoration: none; 
      height: 30px; 
      width: 70px; 
      margin-top: 5px; 
      margin-bottom: 5px; 
      display: block; 
     } 

     .btn.active { 
      background: #cecece; 
      text-decoration: none; 
     } 
     </style> 
    </head> 
    <body> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
    </body> 
    <script> 
     function toggleActiveState() { 
      this.classList.toggle('active'); 
     } 
     var btns = document.querySelectorAll('.btn'); 
     [].forEach.call(btns, function(btn) { 
      btn.addEventListener('click', toggleActiveState, false); 
     }); 
    </script> 
</html>

這種形式給出了將工作按鈕的無限數量。

來源

2015-12-09 18:49:33

的OP是使用jQuery，這只是增加了一個活躍狀態**每次**它被點擊並且在再次單擊時不會刪除它。 – SidOfc

現在它確實切換了課程。爲什麼當vanilla JavaScript執行這項工作時，你更喜歡使用jQuery？ –

由於OP已經在使用jQuery，所以第二個原因是他也已經在使用無阻礙的方法，這使得你的HTML比你擁有的更加靈活。假設你有更多的元素你不得不在服務器端或HTML上添加onclick，如果你在JS中這樣做，你不必這樣做，因爲處理器只是監聽一個它必須綁定的類至。 – SidOfc

您可以使用jQuery的toggleClass（className）函數。

http://api.jquery.com/toggleclass/

<script> 
    $("button.btn").click(function() { 
     $(this).toggleClass("active"); 
    }); 
</script> 

<style> 
    .active{ 
     // your active style 
    } 
<style>

來源

2015-12-09 18:54:40

請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/:active現在發生的事情是它工作得很好:-)但是你要求它做什麼以及你想要它做什麼並不是一回事。

我認爲你需要修復你的CSS和定義active爲一類，而不是一個僞類（未經測試，但在這裏不用）：

.active { 
    background: #cecece; 
}

來源

2015-12-09 18:56:23 David

@dfsq你是對的，刪除我的評論。 – SidOfc

謝謝你的回答，但這是西德尼在下面寫的同樣的答案（他的速度更快），我仍然會按upvote，謝謝:) – axchink

按鈕：使用JavaScript和CSS激活

回答

相關問題