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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style type="text/css">
/* SIMLPE CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*- -*/
/*- GENERIC BODY STYLES -*/
body {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #333;
background: #fff;
}
p { margin-bottom: 18px; }
a { text-decoration: underline; }
a:hover { text-decoration: none; }
#container { width: 802px; margin: 0 auto; }
/*- -*/
/*- FILTER OPTIONS -*/
ul#filterOptions {
width: 802px;
height: 52px;
margin: 30px 0;
overflow: hidden;
}
ul#filterOptions li { height: 52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
height: 50px;
padding: 0 20px;
border: 1px solid #999;
background: #cfcfcf;
color: #fff;
font-weight: bold;
line-height: 50px;
text-decoration: none;
display: block;
}
ul#filterOptions li a:hover { background: #c9c9c9; }
ul#filterOptions li.active a { background: #999; }
/*- -*/
/*- OUR DATA HOLDER -*/
#ourHolder { width: 800px; height: 850px; overflow: hidden; }
#ourHolder div.item {
width: 200px;
height: 200px;
float: left;
text-align: center;
}
#ourHolder div.item h3 { margin-top: 10px; font-size: 16px; line-height: 20px; }
/*- -*/
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');
// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');
if(ourClass == 'all') {
// show all our items
$('#ourHolder').children('div.item').show();
}
else {
// hide all elements that don't share ourClass
$('#ourHolder').children('div:not(.' + ourClass + ')').hide();
// show all elements that do share ourClass
$('#ourHolder').children('div.' + ourClass).show();
}
return false;
});
});
</script>
<title>Simple data filtering using jQuery</title>
</head>
<body>
<div id="container">
<ul id="filterOptions">
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="prem">Premier League</a></li>
<li><a href="#" class="champ">Championship</a></li>
<li><a href="#" class="league1">League 1</a></li>
<li><a href="#" class="league2">League 2</a></li>
</ul>
<div id="ourHolder">
<div class="item league2">
<img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
<h3>Accrington Stanley</h3>
</div>
<div class="item prem">
<img src="images/arsenal.jpg" alt="Arsenal" />
<h3>Arsenal</h3>
</div>
<div class="item league2">
<img src="images/burton-albion.jpg" alt="Burton Albion" />
<h3>Burton Albion</h3>
</div>
<div class="item champ">
<img src="images/cardiff-city.jpg" alt="Cardiff City" />
<h3>Cardiff City</h3>
</div>
<div class="item champ">
<img src="images/derby-county.jpg" alt="Derby County" />
<h3>Derby County</h3>
</div>
<div class="item prem">
<img src="images/everton.jpg" alt="Everton" />
<h3>Everton</h3>
</div>
<div class="item league2">
<img src="images/morecambe.jpg" alt="Morecambe" />
<h3>Morecambe</h3>
</div>
<div class="item champ">
<img src="images/norwich-city.jpg" alt="Norwich City" />
<h3>Norwich City</h3>
</div>
<div class="item league1">
<img src="images/notts-county.jpg" alt="Notts County" />
<h3>Notts County</h3>
</div>
<div class="item champ">
<img src="images/reading.jpg" alt="Reading" />
<h3>Reading</h3>
</div>
<div class="item league1">
<img src="images/sheffield-wednesday.jpg" alt="Sheffield Wednesday" />
<h3>Sheffield Wednesday</h3>
</div>
<div class="item prem">
<img src="images/sunderland.jpg" alt="Sunderland" />
<h3>Sunderland</h3>
</div>
<div class="item prem">
<img src="images/tottenham-hotspur.jpg" alt="Tottenham Hotspur" />
<h3>Tottenham Hotspur</h3>
</div>
<div class="item champ">
<img src="images/watford.jpg" alt="Watford" />
<h3>Watford</h3>
</div>
</div>
</div>
</body>
</html> |
