* 특징 : 가볍다. CSS3호환해준다. 다양한 브라우져에서 사용이 가능하다.
* 사용 : find.do 형식 ex) $("div").hide();
- find : css selector와 동일한 방식으로 html에서의 특정 클래스를 지칭한다.
- selector를 이용한 결과는 배열로 돌아오는데, JQuery에 제공해주는 each 문으로 쉽게 순회가 가능하다.
- do : selector로 선택한 것으로 무엇을 할 것인가? (> 레퍼런스를 참조합세)
* JQuery가 Html 문서가 모두 ready가 된 이후에 수행되는 것이 안전하다.
- $(function(){ ... }); //...에 다양한 JQuery함수를 사용하는 것이 이상적!!
- 예제 소스 -
* 사용 : find.do 형식 ex) $("div").hide();
- find : css selector와 동일한 방식으로 html에서의 특정 클래스를 지칭한다.
- selector를 이용한 결과는 배열로 돌아오는데, JQuery에 제공해주는 each 문으로 쉽게 순회가 가능하다.
- do : selector로 선택한 것으로 무엇을 할 것인가? (> 레퍼런스를 참조합세)
* JQuery가 Html 문서가 모두 ready가 된 이후에 수행되는 것이 안전하다.
- $(function(){ ... }); //...에 다양한 JQuery함수를 사용하는 것이 이상적!!
- 예제 소스 -
<!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>jQuery Test</title>
<script type = "text/javascript" src='jquery-1.6.4.min.js'></script>
<style type="text/css">
.tab{padding:0 0 35px 0;}
.tab>ul{width:400px;position:relative; margin:0; padding:0; list-style:none; border-bottom:2px solid #315593; font-size:12px; }
.tab>ul:after{ content:""; display:block; clear:both;}
.tab>ul>li { float:left; margin-right:1px; background:#4CB1E5;}
.tab>ul>li>a{ float:left; text-decoration:none;}
.tab>ul>li>a>span{ display:inline-block; padding:6px 25px 6px 25px; color:#fff;}
.tab>ul>li>div{ width:380px; position:absolute; top:30px; left:0; list-style:none; border:0; margin:0; padding:10px;background:#eee;}
.tab>ul>li.selected {background-color:#315593; margin-top:1px; }
</style>
</head>
<body>
<div class="tab">
<ul>
<li><a href="#"><span>Tab 1</span></a>
<div>Tab 1</div>
</li>
<li><a href="#"><span>Tab 2</span></a>
<div>Tab 2</div>
</li>
</ul>
</div>
<script type = "text/javascript">
$(function($){
//Clicked li item of tab class, and first a
$('.tab').find('li>a').click(function() {
//remove All tab
$(".tab>ul>li").removeClass('selected');
$(".tab>ul>li>div").hide();
//viw selected content
//$(this).parent().addClass('selected');
//$(this).parent().attr('class','selected');
$(this).parent().toggleClass('selected'); //3개중 하나 아무거나 가능
$(this).parent().find('div').show();
});
//Start session, first item of li,a is selected.
$(".tab li>a:first").click();
});
</script>
</body>
</html>
