<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src ="http://code.jquery.com/jquery-latest.js"></script>
<title>.toggleClass()</title>
<style>
p
{
margin: 4px;
font-size: 16px;
font-weight: border;
cursor: pointer;
}
.blue
{
color: blue;
}
.highlight
{
background: yellow;
}
</style>
</head>
<body>
<p class="blue">Click to toggle !</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs.</p>
<script>
//모든 <p>엘리먼트에 대해 "클릭"이벤트 설정
$("p").click(function()
{
//클릭한 엘리먼트(this)에 대해 "highlight"클래스를 토글함.
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
14-2_Attr_toggleClass().html반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 14-3_Filtering.html (0) | 2016.12.12 |
|---|---|
| [JavaScript] 14-2_Attr_prop()_val().html (0) | 2016.12.12 |
| [JavaScript] 14-2_Attr_removeClass().html (0) | 2016.12.12 |
| [JavaScript] 14-2_Attr_hasCalss().html (0) | 2016.12.12 |
| [JavaScript] 14-2_Attr_attr()_html().html (0) | 2016.12.12 |