-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.html
151 lines (126 loc) · 3.68 KB
/
jquery.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery Practice</title>
<link rel="stylesheet" href="./CSS/jquery.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia"
/>
<style>
body header {
font-family: "Sofia", sans-serif;
}
.special{
font:bold;
color:gray;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<h1>To be continued...</h1>
</header>
<figrue class="container">
<ul class="slides">
<li class="slide"><img src="pics/black horse1.jpg" alt=""></li>
<li class="slide"><img src="pics/black horse2.png" alt=""></li>
<li class="slide"><img src="pics/black horse3.png" alt=""></li>
<li class="slide"><img src="pics/black horse4.png" alt=""></li>
<li class="slide"><img src="pics/black horse1.jpg" alt=""></li>
</ul>
</figrue>
<section class="feature-box">
<div class="first">
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li class="orange">Orange</li>
<li>Strawberry</li>
<!-- <li>Fruits above are all my favorite.</li> -->
</ul>
<p>
<h4>Add a ftuit here!</h4>
Fruit Name: <input type="text" id="fruit-add">
<button id="add">Add!</button>
</p>
</div>
<div class="second">
<ul>
<li>Order Collie</li>
<li>Golden Retriever</li>
<li>British ShortHair</li>
<li>Pets above are all my good buddies.</li>
</ul>
</div>
<!-- buttons for JQuery -->
<div class="buttons">
<button class="buttonItem" data-panel="panel1">Button1</button>
<button class="buttonItem" data-panel="panel2">Button2</button>
<button class="buttonItem" data-panel="panel3">Button3</button>
</div>
<!-- item blocks for JQuery -->
<div class="third">
<div class="panel1">
<div class="panelHead">
#panel1
</div>
<div class="panelBody">
content
</div>
</div>
<div class="panel2">
<div class="panelHead">
#panel2
</div>
<div class="panelBody">
content
</div>
</div>
<div class="panel3">
<div class="panelHead">
#panel3
</div>
<div class="panelBody">
content
</div>
</div>
</div>
<!-- tab-panel -->
<div id="tab-panel">
<ul class="tabs">
<li class="tab active" data-panel="panel1">Tab1</li>
<li class="tab" data-panel="panel2">Tab2</li>
<li class="tab" data-panel="panel3">Tab3</li>
</ul>
<div id='panel1' class="panel active">
<b>This is the first panel!</b><br>
Monday <br>
Tuesday <br>
Wednesday <br>
Thursday <br>
Friday <br>
</div>
<div id="panel2" class="panel">
<b>This is the second panel!</b><br>
Monday <br>
Tuesday <br>
Wednesday <br>
Thursday <br>
</div>
<div id="panel3" class="panel">
<b>This is the third panel!</b><br>
Monday <br>
Tuesday <br>
Wednesday <br>
</div>
</div>
</section>
<p id="slogan1">Be fearless, stick to the end and never give up.</p>
<footer id="slogan2">Any limitation starts from within.</footer>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./JS/main_jquery.js"></script>
</html>