单击图像图标时高亮显示该图标

Question

我有三个图像作为icons用于不同用途。

现在我想要的是

如果单击了第一个图标，则第一个图标应为highlighted，如果单击了第二个图标，那么第二个图像应为highlighted。

请参阅您的参考HTML：-

<tr>
        <td width="18%" height="40" align="left" valign="middle"></td>
        <td style="text-align: left; vertical-align: middle;" width="6%">
            <input type="checkbox" id="branchChkbx" title="Branch" checked="checked" class="hideChkbx" />
            <a href="locateBranches_rbl_view.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
                <img alt="Branch" src="images/branch_icon.png" height="40" width="40" title="Branch" style="border: 0;" />
                <p class="para01">Branch</p>
            </a>
        </td>
        <td style="text-align: left; vertical-align: middle;" width="5%">
            <input type="checkbox" id="atmChkbx" title="ATM" checked="checked" class="hideChkbx" />
            <a href="locateATM_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
                <img alt="ATM" src="images/atm_icon.png" height="40" width="40" title="ATM" style="border: 0;" /><p class="para01">ATM</p>
            </a>
        </td>
        <td style="text-align: left; vertical-align: middle;" width="6%">
            <input type="checkbox" id="lockerChkbx" title="Locker" checked="checked" class="hideChkbx" />
            <a href="locateLockers_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
                <img alt="Locker" src="images/locker_icon.png" height="40" width="40" title="Locker" style="border: 0;" /><p class="para01">Locker</p>
            </a>
        </td>
        <td width="6%" height="40" align="left" valign="middle" style="border-left: 1px solid #cccccc;">
            <a id="A1" href="Default.aspx" runat="server" style="float: left; text-decoration: underline; color: #666; margin-left: 12px; font-family: 'signika_negativeRegular', sans-serif;">
                <p class="para01">View All</p>
            </a>
        </td>
    </tr>

另请参阅CSS：-

.para01 {
        font-size: 16px;
        margin-top: 6px;
        font-weight: bold;
        margin-top: 10px;
    }

请帮助

Answer 1

您的最佳选择应该是将图像制作成css精灵，并更改背景大小。若这对你们来说很难，你们可以制作A标签的背景图片。像这样：

a {
   background: url('image.png') no-repeat center center;
}
a.highlighted {
   background-image: url('image-highlight.png');
}

Answer 2

它喜欢这个吗

CSS

para01 {
        font-size: 16px;
        margin-top: 6px;
        font-weight: bold;
        /*line-height: 1.5em;*/
        margin-top: 10px;
    }
    .highlight {
        background: yellow;
    }
    .imghighlight{
        height:50px;
        width:50px;
    }

JQuery：-

$(document).ready(function () {
        $('input.hideChkbx').on('change', function () {
            $('input.hideChkbx').not(this).prop('checked', false);
            $('input.hideChkbx').not(this).parent().find("img").removeClass("imghighlight");
            $('input.hideChkbx').not(this).parent().find(".para01").removeClass("highlight");
            if ($(this).is(':checked')) {
                $(this).parent().find("img").addClass("imghighlight");
                $(this).parent().find(".para01").addClass("highlight");
            }
        });
    });

它在上运行