jQuery使用单选按钮切换div

前端之家收集整理的这篇文章主要介绍了jQuery使用单选按钮切换div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
简单的html& jQuery的
<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label>

<div id="blk-1" style="display:none">
    ...
</div>
<div id="blk-2" style="display:none">
    ...
</div>

$(function() {
    $("[name=toggler]").each(function(i) {
        $(this).change(function(){
            $('#blk-1,#blk-2').hide();
            divId = 'blk-' + $(this).val();
            $("#"+divId).show('slow');
        });
    });
 });

所需的切换效果不起作用.单击一个单选框无法隐藏另一个.

有任何想法吗?

解决方法

<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label>

<div id="blk-1" class="toHide" style="display:none">
    money
</div>
<div id="blk-2" class="toHide" style="display:none">
    interest
</div>

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });

http://www.jsfiddle.net/eKFrW/

猜你在找的jQuery相关文章