我需要在此fiddle上再添加2个div
当我添加它不起作用..它在下面显示文本并且evrything是错误的。你知道如何增加2个选项
$(document).ready(function () {
$('#div1,#div2').hide();
$('#id_radio1').click(function () {
$('#div2').hide('fast');
$('#div1').show('fast');
});
$('#id_radio2').click(function () {
$('#div1').hide('fast');
$('#div2').show('fast');
});
});
最佳答案
使用属性选择器尝试以下简化代码,
JQUERY:
$(document).ready(function() {
$('[id^=div]').hide();
$('[id^=id_radio]').click(function() {
$('[id^=div]').hide('fast');
$('#div' + this.id.slice(-1)).show('fast');
});
});
HTML:
<center>
<h2>show hide div on click using jquery</h2>
<div style="padding:25px;width: 100px;">
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
<br />
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
<br />
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio2" />Radio3
<br />
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio2" />Radio4
</div>
<div align="center" style="padding:25px;width: 300px;">
<div id="div1">This is First (1st) division</div>
<div id="div2">This is Second (2nd) division</div>
<div id="div3">This is Second (3rd) division</div>
<div id="div4">This is Second (4th) division</div>
</div>
</center>
Fiddle Demo