javascript - 仅保持悬停背景图像处于事件状态，除非单击第二个按钮

Question

我有两个按钮(每个按钮都有灰色背景图像)，每个按钮都有一个彩色悬停背景图像。我只想保持颜色背景处于事件状态，除非单击旁边的按钮。现在，如果您单击屏幕上的任意位置，背景悬停图像的焦点将恢复到原始的灰色按钮/图像。

这是 CSS 的摆弄: http://jsfiddle.net/J6DP9/8/

<div class="buttons-holder">
    <button id="rdb1" type="button" name="toggler" value="US">United States</button>
    <button id="rdb2" type="button" name="toggler" value="International">International</button>
</div>
</div>
</div>
<div class="cms-pages">
    <div class="divclearboth"></div>
    <hr>
</div>
<div id="blk-0" class="toHide">
    <div class="center-form-img">
        <img src="{{media url=" wysiwyg/form-inactive.jpg "}}" alt="" />
    </div>
</div>
<div id="blk-US" class="toHide" style="display:none;">{{block type=core/template name=wholesale-us template=cmg/wholesale-us.phtml}}</div>
<div id="blk-International" class="toHide" style="display:none;">{{block type=core/template name=wholesale-intl template=cmg/wholesale-intl.phtml}}</div>

这是 JS:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function () {
    $("[name=toggler]").click(function () {
        $('.toHide').hide();
        $("#blk-" + $(this).val()).fadeIn();
    });
});
</script>

非常感谢任何帮助!提前致谢。

Answer 1

我更新了您的代码，将 active 类添加到最后单击的按钮，并从所有其他按钮中删除 active 类。

http://jsfiddle.net/J6DP9/16/