アクティブなボタンのテキストの色を変更するには？

アクティブなボタンのテキストの色を白に変更し、他のボタンのテキストの色を非アクティブにしたままにするにはどうすればよいですか？アクティブなボタンのテキストの色を変更するには？

JavaScriptで

<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

- >

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";

または、3番目のオプションは、link（）insteを使用することです（：アクティブなど）のためにCSSのセレクタを使用する

出典

2017-07-11 19:06:30 RGonzalez

CSSにはCSSとJavascriptの両方を使用できます.を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

アクティブなボタンのテキストの色を変更するには？

答えて

関連する問題