Jquery show hide toggle

最新推荐文章于 2022-05-14 16:31:32 发布

淮少

最新推荐文章于 2022-05-14 16:31:32 发布

阅读量50

点赞数

分类专栏： JavaScript 文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/yangpingzhun/article/details/83553194

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏


<html>
<head>
<title>show hide toggle</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("#show").click(function(){
			$("#showDiv").show(1000,alert(100));
		});
		$("#hide").click(function(){
			$("#showDiv").hide(1000,alert(200));
		});
		$("#toggle").click(function(){
			$("#showDiv").toggle(1000,alert(300));
		});
	});
</script>
<style>
	.showDiv
	{
		width:200px;
		height:200px;
		border:1px red solid;
	}
</style>
</head>

<body>

<div class="showDiv" style="display:none;" id="showDiv">show and hide</div>
<p style="display: none">Hello</p>

<input type="button" value="Show" id="show" />
<input type="button" value="Hide" id="hide" />
<input type="button" value="Toggle" id="toggle" />
</body>
</head>