<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 스크롤</title>
<script type="text/javascript" src="http://webnoon.net/attachment/cfile2.uf@1477010F4A6EC01064B402.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category a").click(function(e){
e.preventDefault();
var category = $(this).attr("title");
$("#newslist li").fadeOut("slow");
if(category == "all"){$("#newslist li").fadeIn("slow");}
else{$("#newslist li[class*="+category+"]").fadeIn("slow");}
});
});
</script>
<style type="text/css">
body{text-align:center;background:#CCC;}
a:link,a:visited{color:#00F;text-decoration:none;}
#wrap{text-align:left;width:90%;padding:10px;margin:0 auto;}
li{list-style:none;}
#category,#newslist{background:#FFF;padding:2px;border:1px solid #000;margin:5px;}
#category li{display:inline;}
</style>
</head>
<body>
<h1>분류 기능 만들기</h1>
<div id="wrap">
<div id="category">
<h3>카테고리</h3>
<ul>
<li><a href="#" title="all">전체기사</a></li>
<li><a href="#" title="eco">경제/금융</a></li>
<li><a href="#" title="soc">사회</a></li>
<li><a href="#" title="star">연예</a></li>
<li><a href="#" title="sports">스포츠</a></li>
</ul>
</div>
<div id="newslist">
<h3>뉴스 목록</h3>
<ul>
<li class="eco"><a href="#">경제뉴스 1 </a></li>
<li class="sports"><a href="#">스포츠뉴스 1</a></li>
<li class="soc"><a href="#">사회뉴스 1</a></li>
<li class="eco"><a href="#">경제뉴스 2 </a></li>
<li class="star"><a href="#">연예뉴스 </a></li>
<li class="sports"><a href="#">스포츠뉴스 2</a></li>
<li class="eco"><a href="#">경제뉴스 3 </a></li>
<li class="soc"><a href="#">사회뉴스 2</a></li>
<li class="eco"><a href="#">경제뉴스 4</a></li>
<li class="sports"><a href="#">스포츠 뉴스3</a></li>
<li class="star_sports"><a href="#">연예/스포츠 뉴스 </a></li>
<li class="eco"><a href="#">경제뉴스 6</a></li>
<li class="soc"><a href="#">사회뉴스 3</a></li>
<li class="soc_eco"><a href="#">사회/경제뉴스 </a></li>
</ul>
</div>
</div>
<address><a href="http://webnoon.net">http://webnoon.net</a> © 웹눈.</address>
</body>
</html>
'jquery' 카테고리의 다른 글
| JQuery 마우스 오버 이미지(img src) 변경 (0) | 2011.01.05 |
|---|---|
| JQuery 관련 링크 모음 (0) | 2011.01.05 |