teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問each,event プラグインせずに

編集履歴

質問編集履歴

5

2017/04/20 10:39

投稿

tomatotomato
tomatotomato

スコア6

test CHANGED
@@ -1 +1 @@
1
- PAGINATION,addClass,removeClass,each,event プラグインせずに
1
+ each,event プラグインせずに
test CHANGED
@@ -1,229 +1 @@
1
- ###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
2
-
3
-
4
-
5
-
6
-
7
- ###該当のソースコード
8
-
9
- <!DOCTYPE html>
10
-
11
- <html>
12
-
13
- <head>
14
-
15
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
16
-
17
- <title></title>
18
-
19
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
20
-
21
- <style>
22
-
23
- .pagination-container{
24
-
25
- margin-top: 30px;
26
-
27
- text-align: center;
28
-
29
- }
30
-
31
- .pagination{
32
-
33
- display: inline-block;
34
-
35
- list-style: none;
36
-
37
- padding: 0;
38
-
39
- margin: 0;
40
-
41
- }
42
-
43
- .pagination:after{
44
-
45
- display: block;
46
-
47
- content: "";
48
-
49
- clear:both;
50
-
51
- }
52
-
53
- .pagination > li{
54
-
55
- float: left;
56
-
57
- margin: 0;
58
-
59
- padding: 0;
60
-
61
- }
62
-
63
- .pagination > li + li{
64
-
65
- margin-left: 10px;
66
-
67
- }
68
-
69
- .pagination > li > a{
70
-
71
- display: inline-block;
72
-
73
- text-decoration: none;
74
-
75
- padding: 10px;
76
-
77
- border: solid 1px transparent;
78
-
79
- border-radius: 20%;
80
-
81
- background-color: #E4E4E5;
82
-
83
- color: #021E4A;
84
-
85
-
86
-
87
- }
88
-
89
- .pagination > li.active > a{
90
-
91
- background-color: #009DDF;
92
-
93
- color: #FFFFFF;
94
-
95
- cursor: default;
96
-
97
- }
98
-
99
- .pagination > li.disabled > a{
100
-
101
- background-color: #E4E4E5;
102
-
103
- color: #FFFFFF;
104
-
105
- cursor: default;
106
-
107
- }
108
-
109
- </style>
110
-
111
- </head>
112
-
113
- <body>
114
-
115
- <div class="pagination-container">
116
-
117
- <ol class="jsc-pagination pagination">
118
-
119
- <li class="jsc-previous disabled"><a href="#"><</a></li>
120
-
121
- <li class="active"><a href="1">1</a></li>
122
-
123
- <li><a href="2">2</a></li>
124
-
125
- <li><a href="3">3</a></li>
126
-
127
- <li><a href="4">4</a></li>
128
-
129
- <li><a href="5">5</a></li>
130
-
131
- <li><a href="6">6</a></li>
132
-
133
- <li><a href="7">7</a></li>
134
-
135
- <li><a href="8">8</a></li>
136
-
137
- <li><a href="9">9</a></li>
138
-
139
- <li><a href="10">10</a></li>
1
+ abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
140
-
141
- <li class="jsc-next"><a href="#">></a></li>
142
-
143
- </ol>
144
-
145
- </div>
146
-
147
- <div class="pagination-container">
148
-
149
- <ol class="jsc-pagination pagination">
150
-
151
- <li class="jsc-previous disabled"><a href="#"><</a></li>
152
-
153
- <li class="active"><a href="1">1</a></li>
154
-
155
- <li><a href="2">2</a></li>
156
-
157
- <li><a href="3">3</a></li>
158
-
159
- <li><a href="4">4</a></li>
160
-
161
- <li><a href="5">5</a></li>
162
-
163
- <li><a href="6">6</a></li>
164
-
165
- <li><a href="7">7</a></li>
166
-
167
- <li><a href="8">8</a></li>
168
-
169
- <li><a href="9">9</a></li>
170
-
171
- <li><a href="10">10</a></li>
172
-
173
- <li class="jsc-next"><a href="#">></a></li>
174
-
175
- </ol>
176
-
177
- </div>
178
-
179
- <div class="pagination-container">
180
-
181
- <ol class="jsc-pagination pagination">
182
-
183
- <li class="jsc-previous disabled"><a href="#"><</a></li>
184
-
185
- <li class="active"><a href="1">1</a></li>
186
-
187
- <li><a href="2">2</a></li>
188
-
189
- <li><a href="3">3</a></li>
190
-
191
- <li><a href="4">4</a></li>
192
-
193
- <li><a href="5">5</a></li>
194
-
195
- <li class="jsc-next"><a href="#">></a></li>
196
-
197
- </ol>
198
-
199
- </div>
200
-
201
- </body>
202
-
203
- <script>
204
-
205
- ```ここに言語を入力
206
-
207
- コード
208
-
209
- ```
210
-
211
-
212
-
213
-
214
-
215
- </script>
216
-
217
- </html>
218
-
219
-
220
-
221
- ###試したいこと
222
-
223
- addClass,removeClass,eachの使用
224
-
225
-
226
-
227
- ###補足情報(言語/FW/ツール等のバージョンなど)
228
-
229
- HTML,CSS,Jquery,JavaScript

4

特になし

2017/04/20 10:39

投稿

tomatotomato
tomatotomato

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,225 +1,213 @@
1
+ ###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
2
+
3
+
4
+
5
+
6
+
7
+ ###該当のソースコード
8
+
9
+ <!DOCTYPE html>
10
+
11
+ <html>
12
+
13
+ <head>
14
+
15
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
16
+
17
+ <title></title>
18
+
19
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
20
+
21
+ <style>
22
+
23
+ .pagination-container{
24
+
1
- `````````ここに言語を入力
25
+ margin-top: 30px;
26
+
2
-
27
+ text-align: center;
28
+
29
+ }
30
+
31
+ .pagination{
32
+
33
+ display: inline-block;
34
+
35
+ list-style: none;
36
+
37
+ padding: 0;
38
+
39
+ margin: 0;
40
+
41
+ }
42
+
43
+ .pagination:after{
44
+
45
+ display: block;
46
+
47
+ content: "";
48
+
49
+ clear:both;
50
+
51
+ }
52
+
53
+ .pagination > li{
54
+
55
+ float: left;
56
+
57
+ margin: 0;
58
+
59
+ padding: 0;
60
+
61
+ }
62
+
63
+ .pagination > li + li{
64
+
65
+ margin-left: 10px;
66
+
67
+ }
68
+
69
+ .pagination > li > a{
70
+
71
+ display: inline-block;
72
+
73
+ text-decoration: none;
74
+
75
+ padding: 10px;
76
+
77
+ border: solid 1px transparent;
78
+
79
+ border-radius: 20%;
80
+
81
+ background-color: #E4E4E5;
82
+
83
+ color: #021E4A;
84
+
85
+
86
+
87
+ }
88
+
89
+ .pagination > li.active > a{
90
+
91
+ background-color: #009DDF;
92
+
93
+ color: #FFFFFF;
94
+
95
+ cursor: default;
96
+
97
+ }
98
+
99
+ .pagination > li.disabled > a{
100
+
101
+ background-color: #E4E4E5;
102
+
103
+ color: #FFFFFF;
104
+
105
+ cursor: default;
106
+
107
+ }
108
+
109
+ </style>
110
+
111
+ </head>
112
+
113
+ <body>
114
+
115
+ <div class="pagination-container">
116
+
117
+ <ol class="jsc-pagination pagination">
118
+
119
+ <li class="jsc-previous disabled"><a href="#"><</a></li>
120
+
121
+ <li class="active"><a href="1">1</a></li>
122
+
123
+ <li><a href="2">2</a></li>
124
+
125
+ <li><a href="3">3</a></li>
126
+
127
+ <li><a href="4">4</a></li>
128
+
129
+ <li><a href="5">5</a></li>
130
+
131
+ <li><a href="6">6</a></li>
132
+
133
+ <li><a href="7">7</a></li>
134
+
135
+ <li><a href="8">8</a></li>
136
+
137
+ <li><a href="9">9</a></li>
138
+
139
+ <li><a href="10">10</a></li>
140
+
141
+ <li class="jsc-next"><a href="#">></a></li>
142
+
143
+ </ol>
144
+
145
+ </div>
146
+
147
+ <div class="pagination-container">
148
+
149
+ <ol class="jsc-pagination pagination">
150
+
151
+ <li class="jsc-previous disabled"><a href="#"><</a></li>
152
+
153
+ <li class="active"><a href="1">1</a></li>
154
+
155
+ <li><a href="2">2</a></li>
156
+
157
+ <li><a href="3">3</a></li>
158
+
159
+ <li><a href="4">4</a></li>
160
+
161
+ <li><a href="5">5</a></li>
162
+
163
+ <li><a href="6">6</a></li>
164
+
165
+ <li><a href="7">7</a></li>
166
+
167
+ <li><a href="8">8</a></li>
168
+
169
+ <li><a href="9">9</a></li>
170
+
171
+ <li><a href="10">10</a></li>
172
+
173
+ <li class="jsc-next"><a href="#">></a></li>
174
+
175
+ </ol>
176
+
177
+ </div>
178
+
179
+ <div class="pagination-container">
180
+
181
+ <ol class="jsc-pagination pagination">
182
+
183
+ <li class="jsc-previous disabled"><a href="#"><</a></li>
184
+
185
+ <li class="active"><a href="1">1</a></li>
186
+
187
+ <li><a href="2">2</a></li>
188
+
189
+ <li><a href="3">3</a></li>
190
+
191
+ <li><a href="4">4</a></li>
192
+
193
+ <li><a href="5">5</a></li>
194
+
195
+ <li class="jsc-next"><a href="#">></a></li>
196
+
197
+ </ol>
198
+
199
+ </div>
200
+
201
+ </body>
202
+
203
+ <script>
204
+
3
- ここに言語を入力
205
+ ```ここに言語を入力
206
+
207
+ コード
4
208
 
5
209
  ```
6
210
 
7
- ここに言語を入力
8
-
9
- ```
10
-
11
- コード
12
-
13
- ```###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
14
-
15
-
16
-
17
-
18
-
19
- ###該当のソースコード
20
-
21
- <!DOCTYPE html>
22
-
23
- <html>
24
-
25
- <head>
26
-
27
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
28
-
29
- <title></title>
30
-
31
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
32
-
33
- <style>
34
-
35
- .pagination-container{
36
-
37
- margin-top: 30px;
38
-
39
- text-align: center;
40
-
41
- }
42
-
43
- .pagination{
44
-
45
- display: inline-block;
46
-
47
- list-style: none;
48
-
49
- padding: 0;
50
-
51
- margin: 0;
52
-
53
- }
54
-
55
- .pagination:after{
56
-
57
- display: block;
58
-
59
- content: "";
60
-
61
- clear:both;
62
-
63
- }
64
-
65
- .pagination > li{
66
-
67
- float: left;
68
-
69
- margin: 0;
70
-
71
- padding: 0;
72
-
73
- }
74
-
75
- .pagination > li + li{
76
-
77
- margin-left: 10px;
78
-
79
- }
80
-
81
- .pagination > li > a{
82
-
83
- display: inline-block;
84
-
85
- text-decoration: none;
86
-
87
- padding: 10px;
88
-
89
- border: solid 1px transparent;
90
-
91
- border-radius: 20%;
92
-
93
- background-color: #E4E4E5;
94
-
95
- color: #021E4A;
96
-
97
-
98
-
99
- }
100
-
101
- .pagination > li.active > a{
102
-
103
- background-color: #009DDF;
104
-
105
- color: #FFFFFF;
106
-
107
- cursor: default;
108
-
109
- }
110
-
111
- .pagination > li.disabled > a{
112
-
113
- background-color: #E4E4E5;
114
-
115
- color: #FFFFFF;
116
-
117
- cursor: default;
118
-
119
- }
120
-
121
- </style>
122
-
123
- </head>
124
-
125
- <body>
126
-
127
- <div class="pagination-container">
128
-
129
- <ol class="jsc-pagination pagination">
130
-
131
- <li class="jsc-previous disabled"><a href="#"><</a></li>
132
-
133
- <li class="active"><a href="1">1</a></li>
134
-
135
- <li><a href="2">2</a></li>
136
-
137
- <li><a href="3">3</a></li>
138
-
139
- <li><a href="4">4</a></li>
140
-
141
- <li><a href="5">5</a></li>
142
-
143
- <li><a href="6">6</a></li>
144
-
145
- <li><a href="7">7</a></li>
146
-
147
- <li><a href="8">8</a></li>
148
-
149
- <li><a href="9">9</a></li>
150
-
151
- <li><a href="10">10</a></li>
152
-
153
- <li class="jsc-next"><a href="#">></a></li>
154
-
155
- </ol>
156
-
157
- </div>
158
-
159
- <div class="pagination-container">
160
-
161
- <ol class="jsc-pagination pagination">
162
-
163
- <li class="jsc-previous disabled"><a href="#"><</a></li>
164
-
165
- <li class="active"><a href="1">1</a></li>
166
-
167
- <li><a href="2">2</a></li>
168
-
169
- <li><a href="3">3</a></li>
170
-
171
- <li><a href="4">4</a></li>
172
-
173
- <li><a href="5">5</a></li>
174
-
175
- <li><a href="6">6</a></li>
176
-
177
- <li><a href="7">7</a></li>
178
-
179
- <li><a href="8">8</a></li>
180
-
181
- <li><a href="9">9</a></li>
182
-
183
- <li><a href="10">10</a></li>
184
-
185
- <li class="jsc-next"><a href="#">></a></li>
186
-
187
- </ol>
188
-
189
- </div>
190
-
191
- <div class="pagination-container">
192
-
193
- <ol class="jsc-pagination pagination">
194
-
195
- <li class="jsc-previous disabled"><a href="#"><</a></li>
196
-
197
- <li class="active"><a href="1">1</a></li>
198
-
199
- <li><a href="2">2</a></li>
200
-
201
- <li><a href="3">3</a></li>
202
-
203
- <li><a href="4">4</a></li>
204
-
205
- <li><a href="5">5</a></li>
206
-
207
- <li class="jsc-next"><a href="#">></a></li>
208
-
209
- </ol>
210
-
211
- </div>
212
-
213
- </body>
214
-
215
- <script>
216
-
217
- ```ここに言語を入力
218
-
219
- コード
220
-
221
- ```
222
-
223
211
 
224
212
 
225
213
 

3

特になし

2017/02/23 09:12

投稿

tomatotomato
tomatotomato

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,16 @@
1
+ `````````ここに言語を入力
2
+
3
+ ここに言語を入力
4
+
5
+ ```
6
+
7
+ ここに言語を入力
8
+
9
+ ```
10
+
11
+ コード
12
+
1
- ###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
13
+ ```###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
2
14
 
3
15
 
4
16
 
@@ -202,7 +214,11 @@
202
214
 
203
215
  <script>
204
216
 
205
-
217
+ ```ここに言語を入力
218
+
219
+ コード
220
+
221
+ ```
206
222
 
207
223
 
208
224
 

2

特になし

2017/02/23 09:11

投稿

tomatotomato
tomatotomato

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、ご教授よろしくお願いします。
1
+ ###以下のHTML、CSSを元にプラグインせずにコンストラクタを使用してpaginationを実装していきたいのですが、挙動としては3列のボタンを連動させていきたいのですが、ご教授よろしくお願いします。
2
2
 
3
3
 
4
4
 

1

特になし

2017/02/23 02:06

投稿

tomatotomato
tomatotomato

スコア6

test CHANGED
File without changes
test CHANGED
File without changes