javascript - 如何更改图标颜色，文本颜色和添加H3标签onclick的阴影

Question

这个 JavaScript 东西是新手，但我正在尝试哈哈。我有一个切换，当我点击一个时，文本的颜色当前改变颜色(红色)，然后当我点击另一个时变回黑色，然后现在选择的切换字体是红色的。我的问题是，有没有办法将背景更改为白色，仍然将文本更改为红色并添加阴影，然后在选择另一个谷歌后更改回原始设置，等等第四。这会兼容大多数浏览器吗？

我曾尝试更改我已经可以运行的脚本，但没有成功。

$(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。