PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic

25 September 2008 By


แสดงเนื้อหที่ซ่อนอยู่ด้วย jquery แบบง่าย ดูตัวอย่างพร้อมโค้ดประกอบ
คลิกเพื่อแสดงข้อความที่ซ่อน
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
คลิกเพื่อซ่อนข้อความ


โค้ตประกอบ
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
	$(function(){
		$("a#demo").click(function(){ 
				$("div#show_demo").show();
		});	
		$("a#demo2").click(function(){ 
				$("div#show_demo").hide();
		});			
	});
</script>
<style type="text/css">
#show_demo{
	width:120px;height:150px;
	border:1px solid #cccccc;
	background-color:#999999;
	display:none;
	padding:5px;
	overflow:hidden;
}
</style>
</head>
<br />

<a href="#" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อน</a><br />
<div id="show_demo">
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ 
</div>
<a href="#" id="demo2">คลิกเพื่อซ่อนข้อความ</a><br />
<body>
</body>
</html>

Tags:: jquery basic ซ่อนและแสดง





URL สำหรับอ้างอิง