学习jquery----jquery中的show()和hide() 

<html>
<head>
	<script type="text/javascript" src="jquery-1.5.1.js"></script>
	<script type="text/javascript">
		function choose(){
			var choosed = $("input[name='choose']:checked").val();
			if (choosed == 'div1')
			{
				$('#div1').show();
				$('#div2').hide();
			}
			else
			{
				$('#div1').hide();
				$('#div2').show();
			}
		}
	</script>
</head>
<body>
	<div>
		<input type='radio' value='div1' name='choose' checked='checked' onclick='choose()'/>div1
		<input type='radio' value='div2' name='choose' onclick='choose()'/>div2
	</div>
	<div id='div1' style='display:block'>
		this is div1
	</div>
	<div id='div2' style='display:none'>
		this is div2
	</div>
</body>
</html>

　　另外, .toggle()也可用于切换元素的可见状态。将可见元素置为隐藏，将隐藏置为可见的。

  

<html>
<head>
	<script type="text/javascript" src="jquery-1.5.1.js"></script>
	<script type="text/javascript">
		function choose(){
			$('div').toggle()
		}
	</script>
</head>
<body>
	
	<input type='radio' value='div1' name='choose' checked='checked' onclick='choose()'/>div1
	<input type='radio' value='div2' name='choose' onclick='choose()'/>div2

	<div id='div1' style='display:block'>
		this is div1
	</div>
	<div id='div2' style='display:none'>
		this is div2
	</div>
</body>
</html>

　　

posted @ 2011-10-31 22:56  samlee  阅读(341)  评论(0)    收藏  举报