首页 >> 行业动态 >> 正文

jquery简单切换内容

作者: 管理员 发布时间: 2020-07-23

jquery内容切换时常用的一种内容折叠方式,最简易的方式。

<label><input type="radio" name="type" class="chose_type" value="1"/>文字</label>
<label><input type="radio" name="type" class="chose_type" value="2"/>图片</label> 
<label><input type="radio" name="type" class="chose_type" value="3"/>代码</label>
<div id="type_1">内容一</div>
<div id="type_2">内容二</div>
<div id="type_3">内容三</div>

制作三个按钮,通过点击三个按钮,得到要显示的内容。

function get_box(){
	var val = $('input:radio[name="type"]:checked').val(); 
	if(val == '1'){
		$("#type_1").show();
		$("#type_2").hide();
		$("#type_3").hide();
		$("#type_3_1").show();
	}else if(val == '2'){
		$("#type_1").hide();
		$("#type_2").show(); 
		$("#type_3").hide(); 
		$("#type_3_1").show();
	}else if(val == '3'){
		$("#type_1").hide();
		$("#type_2").hide(); 
		$("#type_3").show();
		$("#type_3_1").hide();
	}
}
$(function(){
	$(".chose_type").click(function(){ 
		get_box();
	});
	get_box(); 
});