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。

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

1 个答案: