Simple 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');
});
});
});
The desired toggle effect does not work though. Clicking one radio box fails to hide the other.
Any Ideas?
<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');
});
});
as in http://www.jsfiddle.net/eKFrW/
$("input:radio").click(function(){
$("div").hide();
var div = "#blk-"+$(this).val();
$(div).show();
});
Online demo here: http://jsfiddle.net/yLJPC/
Heres what you want I think. To start I would make the first radio button selected and the first div visible. Then switching buttons would swap the divs
$("input:radio").click(function(){
$('#blk-1').toggle();
$('#blk-2').toggle();
});
精彩评论