1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
|
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
html, body {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
}
a {
margin: 20px;
color: #f63718;
font-size: 3em;
}
div.content {
width: 700px;
margin: 5px;
}
div.content div {
display: inline-block;
width: 200px;
height: 50px;
padding-left: 20px;
color: #FFFFFF;
margin: 5px;
}
.type_1 {
background-color: #4a4aaa;
}
.type_2 {
background-color: #4aaa4a;
}
.type_3 {
background-color: #aa4a4a;
}
</style>
<script type="text/javascript">
$().ready(function () {
var time = 1500;
$('#show_all').click(function (e) {
e.preventDefault();
$('.type_1').fadeIn(time);
$('.type_2').fadeIn(time);
$('.type_3').fadeIn(time);
});
$('#show_type_1').click(function (e) {
e.preventDefault();
$('.type_1').fadeOut(time).fadeIn(time);
$('.type_2').fadeOut(time);
$('.type_3').fadeOut(time);
});
$('#show_type_2').click(function (e) {
e.preventDefault();
$('.type_1').fadeOut(time);
$('.type_2').fadeOut(time).fadeIn(time);
$('.type_3').fadeOut(time);
});
$('#show_type_3').click(function (e) {
e.preventDefault();
$('.type_1').fadeOut(time);
$('.type_2').fadeOut(time);
$('.type_3').fadeOut(time).fadeIn(time);
});
});
</script>
</head>
<body>
<a href="" id="show_all">Tous</a>
<a href="" id="show_type_1">Type_1</a>
<a href="" id="show_type_2">Type_2</a>
<a href="" id="show_type_3">Type_3</a>
<br/>
<div class="content">
<div class="type_1"><p>je suis de type 1</p></div>
<div class="type_2"><p>je suis de type 2</p></div>
<div class="type_3"><p>je suis de type 3</p></div>
<div class="type_2"><p>je suis de type 2</p></div>
<div class="type_3"><p>je suis de type 3</p></div>
<div class="type_1"><p>je suis de type 1</p></div>
<div class="type_2"><p>je suis de type 2</p></div>
<div class="type_1"><p>je suis de type 1</p></div>
<div class="type_1"><p>je suis de type 1</p></div>
<div class="type_3"><p>je suis de type 3</p></div>
</div>
</body>
</html> |
Partager