jQuery用到的方法:
show():如果被選元素已被隱藏,則顯示這些元素。
注意:該效果適用於通過 jQuery 隱藏的元素,或在 CSS 中聲明 display:none 的元素(但不適用於 visibility:hidden 的元素)。
hide():如果被選的元素已被顯示,則隱藏該元素。
注意:我們用到了jQuery的show()和hide()方法需要引入jQuery相關的js。(如下圖引入那個都可以)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery01</title>
<style type="text/css">
div{
height:200px;
width:300px;
margin-top:10px;
margin-bottom: 10px;
background-image: url(/3DT/img/jb.png);
display: none;
}
</style>
<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("div").show(2000);
})
$("#but2").click(function(){
//$("div").text("內容是:8888");
$("div").hide(2000);
})
});
</script>
</head>
<body>
<input type="button" value="圖片顯示" id="but1">
<input type="button" value="圖片收起" id="but2">
<div></div>
<div></div>
<div></div>
</body>
</html>
效果圖:
點擊“圖片顯示”
點擊"圖片收起"