Question

我有两个按钮（每个按钮都带有灰色背景图像），每个按钮都有一个颜色悬停背景图像。我想只保持颜色背景处于活动状态，除非点击它旁边的按钮。现在，如果您点击屏幕上的任意位置，该背景悬停图像的焦点将恢复为原始的灰色按钮/图像。

<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添加button课程，并从所有其他人中删除active课程。

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

除非单击第二个按钮，否则仅保持悬停背景图像处于活动状态

1 个答案: