欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

点击按钮显示和隐藏标签

程序员文章站 2022-05-05 19:54:56
...
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<link type="text/javascript" href="js/jquery-1.11.1.min.js"/>
<title>点击显示和隐藏</title>
<style type="text/css">
#thediv{
  width:250px;
  height:50px;
  background-color:#f90;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn").click(function(){
  $("#thediv").slideToggle();
		if($(".btn").text()=='点击隐藏'){
			$(".btn").text('点击显示');
		}else{
			$(".btn").text('点击隐藏');
		}
  });
});
</script>
</head>
<body>
<div id="thediv"></div>
<button type="button" class="btn">点击隐藏</button>
</body>
</html>
相关标签: 前端