Question

我有3张图片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");
            }
        });
    });

它有效

单击时突出显示图像图标

2 个答案: