如何在點擊時更改圖標顏色，文本顏色和添加H3標簽的陰影

Question

這些JavaScript內容的新手，但我正在嘗試大聲笑。 我有一個切換按鈕，當我單擊一個文本時，文本的顏色當前會更改顏色（紅色），然后當我單擊另一個按鈕時會變回黑色，然后現在選擇的切換字體為紅色。 我的問題是，有沒有一種方法可以將背景更改為白色，仍然將文本更改為紅色並添加陰影，然后在選擇另一個Google時將其更改回原始設置，等等。 這將在大多數瀏覽器上兼容嗎？

我曾嘗試更改我已經運行的腳本，但沒有運氣。

 $(document).ready(function() { $('.header h3').on('click', function() { $('.header h3').css('color', 'black'); $(this).css('color', 'red'); }); }); 

 a#order::before { content:''; padding:0; background: url("./Images/bell1.png") no-repeat !important; width: 20%; height: 20px; display: block; position: relative; left: 0; float: left; margin-left: 30px; /* margin-top: 5%;*/ margin-top: 8px; /*padding-left: 15px;*/ } /*restaurant icons*/ a#restt::before { content:''; padding:0; background: url("./Images/knife_folk1.png") no-repeat !important; width: 20%; height: 20px; display: block; position: relative; left: 0; float: left; margin-left: 30px; /* margin-top: 5%;*/ margin-top: 8px; font: Arial, 'Helvetica Neue', Helvetica, sans-serif !important; color: #8fb653; font-weight: 400; /*padding-left: 15px;*/ } /*account icon*/ a#francc::before { content:''; padding:0; background: url("./Images/icon.png") no-repeat !important; width: 20%; height: 20px; display: block; position: relative; left: 0; float: left; margin-left: 30px; /* margin-top: 5%;*/ margin-top: 8px; /*padding-left: 15px;*/ } 

 <a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a> <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a> <a id="francc" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a> 

每個圖標都有一個未顯示的圖標，但可以在之前的圖像上看到：

Answer 1

嘗試這個：

$(document).ready(function() { 
    $('.header h3').on('click', function() {
        $('a h3').css('color', 'black');
        $(this).css('color', 'red');
    });
});

在這里提琴： http : //jsfiddle.net/js55kr4c/

您還可以在CSS中添加以下內容：

a h3{
    color:black;
}

（以便所有h3在加載時均以黑色顯示）

在這里提琴： http : //jsfiddle.net/js55kr4c/1/

希望它對您和其他人有幫助，T。