2010/07/26 15:57
jQuery - 엘리먼트에 클래스 추가/삭제 하기. General Web2010/07/26 15:57
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
p { margin:0; }
.pStyle { color:red; }
.pStyleb { color:blue; }
.highlight { background:yellow; }
.item-1 { color:green }
.item-2 { color:maroon }
</style>
</head>
<body>
<h2>jQuery - .addClass(): 클래스 추가/삭제</h3>
<h3>단일 엘리먼트의 클래스 추가/삭제</h3>
<p>1234</p>
<p>5678</p>
<p>9012</p>
<script language="javascript">
$('p').addClass('pStyle'); //클래스 추가하기
$('p').removeClass('pStyle').addClass('pStyleb'); //추가한 클래스 제거하고 다른 클래스 추가하기.
$('p:last').removeClass('pStyleb').addClass('pStyle'); //마지막 p 엘리먼트의 클래스를 제거하고 다른 클래스 추가.
$("p:last").addClass("highlight");
</script>
<h3>리스트형 엘리먼트에 클래스 추가/삭제</h3>
<ul>
<li>가나다</li>
<li>라마바</li>
<li>사아자</li>
</ul>
<script type="text/javascript" language="javascript">
$('ul li').addClass ( function() {
return 'item-' + $(this).index();
});
</script>
<script type="text/javascript" language="javascript">
$('ul li:last').removeClass( function(){
return 'item-' + $(this).index();
})
$('ul li:last').addClass ( function() {
return 'item-' + $(this).index();
});
</script>
</body>
</html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
p { margin:0; }
.pStyle { color:red; }
.pStyleb { color:blue; }
.highlight { background:yellow; }
.item-1 { color:green }
.item-2 { color:maroon }
</style>
</head>
<body>
<h2>jQuery - .addClass(): 클래스 추가/삭제</h3>
<h3>단일 엘리먼트의 클래스 추가/삭제</h3>
<p>1234</p>
<p>5678</p>
<p>9012</p>
<script language="javascript">
$('p').addClass('pStyle'); //클래스 추가하기
$('p').removeClass('pStyle').addClass('pStyleb'); //추가한 클래스 제거하고 다른 클래스 추가하기.
$('p:last').removeClass('pStyleb').addClass('pStyle'); //마지막 p 엘리먼트의 클래스를 제거하고 다른 클래스 추가.
$("p:last").addClass("highlight");
</script>
<h3>리스트형 엘리먼트에 클래스 추가/삭제</h3>
<ul>
<li>가나다</li>
<li>라마바</li>
<li>사아자</li>
</ul>
<script type="text/javascript" language="javascript">
$('ul li').addClass ( function() {
return 'item-' + $(this).index();
});
</script>
<script type="text/javascript" language="javascript">
$('ul li:last').removeClass( function(){
return 'item-' + $(this).index();
})
$('ul li:last').addClass ( function() {
return 'item-' + $(this).index();
});
</script>
</body>
</html>
'General Web' 카테고리의 다른 글
| jQuery-.html() (0) | 2010/07/27 |
|---|---|
| jQuery - .attr() (0) | 2010/07/27 |
| jQuery - 엘리먼트에 클래스 추가/삭제 하기. (0) | 2010/07/26 |
| ASP + AJAX(JSON) (0) | 2010/06/18 |
| Javascript를 이용한 개발에서의 MVC 패턴 (2) | 2009/02/11 |
| 26. 레코드 사이 이동하기 (0) | 2008/12/22 |
TAG jquery
