javascript - 最后单击的图像周围的边框

Question

我正在尝试制作一些 <img>元素表现得像 <input type="radio">按钮(已经管理好了)，现在我需要通知用户他的选择。为此，我想制作一个 border最后选择的图像周围。

请注意，我有超过 1 行的 radio ，因此用户应该能够点击第一行的一个图像(它应该保持突出显示)，然后他必须能够点击第二行，依此类推他的选择仍然突出显示。

.product-info .option img:active
{
    border:1px solid #d9d1d5;
}

示例代码

.images img:active {
    border:3px solid #000;
}

<div class="images">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
</div>

Answer 1

我会采用稍微不同的方法，不使用任何 javascript。基本思想是你想模仿单选按钮，所以让我们使用单选按钮(和标签)功能......

HTML

<div class="images">
    <input type="radio" name="test" value="1" id="test1">
    <label for="test1">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="2" id="test2">
    <label for="test2">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="3" id="test3">
    <label for="test3">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="4" id="test4">
    <label for="test4">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
</div>

CSS

input[type="radio"] {display:none;}
input[type="radio"]:checked+label img {border:3px solid #000;}

And the fiddle

解释

如果设置正确，单击标签会检查关联的单选按钮/复选框(并将焦点放在其他类型的字段上)。我将此默认行为与“相邻兄弟”CSS 选择器 + 和 :checked 伪选择器结合使用，以定位相邻标签及其 img child 。这样做的一个附加值是您可以完全将其作为表单发布，它将发布单选按钮值...