jquery实现控制radio单选切换不同的内容
我们在做网站过程中，有时需要制作单选内容，让用户选择想看的内容，通过单选按钮来进行切换，与tab栏选项卡类似。这时就需要用到jquery控制radio单选切换不同的内容。
实现代码如下：
首先写HTML代码，放二个radio单选按钮，以及二个不同内容的DIV；
<div class="choose">
<label><input name="formweizhi" type="radio" value="houtai" />选项一</label>
<label><input name="formweizhi" type="radio" value="yhemail" />选项二</label>
</div>
<div class="show1">
内容一
</div>
<div class="show2">
内容二
</div>
再写JQUERY代码，用于控制radio单选切换不同的内容；
<script>
jQuery(function () {
// 默认选中选项二
jQuery(".show1").hide();
jQuery('input:radio[name="formweizhi"]').eq(1).attr("checked",true);
// 通过radio切换不同的内容
jQuery("input[name='formweizhi']").change(function () {
var vel = jQuery('input:radio[name="formweizhi"]:checked').val();
if (vel == 'houtai') {
jQuery(".show2").hide();
jQuery(".show1").show();
} else {
jQuery(".show1").hide();
jQuery(".show2").show();
}
});
})
</script>
通过HTML+JQUERY 就可以实现点击radio来切换显示不同的内容了。
