如何更改活動按鈕的文字顏色？

如何將活動按鈕的文字顏色更改爲白色，並在其他按鈕的文字顏色爲黑色時將其保留爲非活動狀態？如何更改活動按鈕的文字顏色？

<button class="tablink tab" onclick="openPrices('Ladies', this, '#0b0c0d')" id="defaultOpen">Ladies services</button> 
<button class="tablink tab1" onclick="openPrices('Mens', this, '#0b0c0d')">Mens services</button> 
<button class="tablink tab2" onclick="openPrices('Colour', this, '#0b0c0d')">Colour services</button>   

<script> 
function openPrices(pricesName, elmnt, color) { 
// Hide all elements with class="tabcontent" by default */ 
var i, tabcontent, tablinks; 
tabcontent = document.getElementsByClassName("tabcontent"); 
for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
} 

// Remove the background color of all tablinks/buttons 
tablinks = document.getElementsByClassName("tablink"); 
for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].style.backgroundColor = ""; 
} 

// Show the specific tab content 
document.getElementById(pricesName).style.display = "block"; 

// Add the specific color to the button used to open the tab content 
elmnt.style.backgroundColor = color; 
} 

// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click();   
</script>

來源

2017-07-11 DonFrost

通過JavaScript - >

tablinks = document.getElementsByClassName("tablink"); 
for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].style.backgroundColor = ""; 
    tablinks[i].style.color = "black"; 

} 

elmnt.style.color = "white";

或通過CSS - >

.tablink{ 
    color:black; 
} 

.tablink.active { 
    color: white; 
}

，並添加/刪除活動類的元素，當你點擊它：

tablinks = document.getElementsByClassName("tablink"); 
for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].style.backgroundColor = ""; 
    tablinks[i].classList.remove = "active";  
} 

elmnt.style.classList.add = "active";

或者第三個選項是使用link（）inste一個按鈕的樣式，作爲一個按鈕樣式，並使用不同的CSS選擇器的元素（：主動等）

來源

2017-07-11 19:06:30 RGonzalez

您可以同時使用CSS和Javascript，只需使用:focus爲CSS或使用:active。 :focus將保持顏色白色，直到你點擊離開，而:active只會在你主動點擊按鈕時保持顏色，我做了一個剪裁，你可以測試它。

var button1 = document.getElementById("button1"); 
 
var button2 = document.getElementById("button2"); 
 
var button3 = document.getElementById("button3"); 
 

 
button1.onclick = function() { 
 
    button1.style.color = "#fff"; 
 
    button2.style.color = "#000"; 
 
    button3.style.color = "#000"; 
 
} 
 
button2.onclick = function() { 
 
    button2.style.color = "#fff"; 
 
    button1.style.color = "#000"; 
 
    button3.style.color = "#000"; 
 
} 
 
button3.onclick = function() { 
 
    button3.style.color = "#fff"; 
 
    button1.style.color = "#000"; 
 
    button2.style.color = "#000"; 
 
}

<body> 
 
    <button type="button" class="btn" id="button1">Button1</button> 
 
    <button type="button" class="btn" id="button2">Button1</button> 
 
    <button type="button" class="btn" id="button3">Button1</button> 
 
</body>

或者CSS的唯一途徑

.btn { 
 
    color: #000; 
 
} 
 

 
.btn:focus { 
 
    color: #fff; 
 
}

<body> 
 
    <button type="button" class="btn" id="button1">Button1</button> 
 
    <button type="button" class="btn" id="button2">Button1</button> 
 
    <button type="button" class="btn" id="button3">Button1</button> 
 
</body>

來源

2017-07-11 19:11:27 Samuel

如何更改活動按鈕的文字顏色？

回答

相關問題