jQuery 강좌2. 펼침목록 만들기
웹눈님의 블로그에서 배운내용 입니다 jquery를 배우실분은 위 링크를 클릭하십시오
모든 게시글 오른쪽 마우스 열어 놓았읍니다만
드레그해서 가져가면 남는것 아무것도 없읍니다
수동으로 코딩 하십시오
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery 연습장</title>
<!--link rel="stylesheet" type="text/css" href="jquery.css"-->
<script type="text/javascript" src="jquery.js"></script>
<!-- 메뉴가 예제2번은 잘 작동되는데 1번은 웹눈님 js파일 링크 걸으면 되는데 제 폴더 주소를 사용하면 안되네요 버전의 차이인가 찾아 보는중입니다 확인되면 수정하도록 하겠읍니다-->
<script type="text/javascript">
$(document).ready(function(){
$("#hello").click(function(){
$(this).hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//예제1번
$("#first h3").toggle(function(e){
e.preventDefault();
$(this).next(). slideUp();
},function(e){
e.preventDefault();
$(this).next().slideDown();
});
//예제2번
$("#second p:not(:first)").slideUp();
$("#second h3").click(function(e){
e.preventDefault();
$("#second p").slideUp();
$(this).next().slideDown();
});
});
</script>
<style type="text/css">
#hello{background:#ff0000; width:100px; position: absolute;}
*{padding:0px; margin:0px;}
body{text-align: center}
div{text-align: center;width:500px;margin:20px auto;}
div p{background: #666666;}
h3{background: #999999;}
address{position:absolute;bottom: 0px;left:0px;}
</style>
</head>
<body>
<h1>펼침/숨김 목록 예제</h1>
<div id="first">
<h2>예제1</h2>
<h3><a href="localhost/index.html">메인화면</a></h3>
<p>웹 프로그레밍/제작을 공부하고 있읍니다</p>
<h3><a href="localhost/jquery/jquery.html">목록1</a></h3>
<p>클릭하면 사라지는 div 엘리먼트 jquery 입니다</p>
<h3><a href="#">목록3</a></h3>
<p># 링크 걸었는데 어디로 가나봅시다</p>
</div>
<div id="second">
<h2>예제2</h2>
<h3><a href="booolean.tistory.com">링크1</a></h3>
<p>내 블로그로 가볼까나?</p>
<h3><a href="http//:www.daum.net">링크2</a></h3>
<p>다음으로 가볼까나?</p>
<h3><a href="http//:www.naver.com">링크3</a></h3>
<p>네이버로 가볼까나?</p>
</div>
<div id="hello">Hello World!</div>
</body>
</html>
'my_lesson > _JQuery' 카테고리의 다른 글
| JavaScript [document object] 문서 속성 보기 , 팝업창 열기 (0) | 2015.04.11 |
|---|---|
| JQuery [animate, addClass, html] (0) | 2015.04.11 |
| JQuery [floatMenu,decoration]스크롤을 따라 움직이는 플로팅 메뉴 (0) | 2013.08.16 |
| JQuery [slidemenu, animate, scroll]스크롤바 따라 움직이는 슬라이드메뉴 (0) | 2013.08.16 |
| JQuery [hide]클릭하면 사라지는 jquery (0) | 2013.08.16 |
댓글