我有两个按钮(每个按钮都有灰色背景图像),每个按钮都有一个彩色悬停背景图像。我只想保持颜色背景处于活动状态,除非单击它旁边的按钮。现在,如果您单击屏幕上的任何位置,该背景悬停图像的焦点将恢复为原始灰色按钮/图像。
这是 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>
任何帮助深表感谢!提前致谢。