2016年11月7日 星期一
jquery find
sample code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/all.js"></script>
</head>
<body >
<div class="cart">
<ul>
<li>
<h3>產品1</h3>
</li>
<li>
<h3>產品2</h3>
</li>
<li>
<h3>產品3</h3>
</li>
<li>
<h3>產品4</h3>
</li>
<li>
<h3>產品5</h3>
</li>
<li>
<h3>產品6</h3>
</li>
</ul>
</div>
</body>
</html>
===============================================
all.js
$(document).ready(function() {
$('.cart li').click(function(event) {
$(this).find('h3').toggleClass('active');
});
});
==============================================
all.css
.cart{
width: 500px;
margin: 20px auto;
}
.cart li{
width: 30%;
float: left;
height: 100px;
margin: 1%;
border: 1px solid #000;
cursor: pointer;
}
.cart h3.active{
background: blue;
color:#fff;
}
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言