質問編集履歴

5

javascriptの編集

2019/08/06 03:02

投稿

nakajima4
nakajima4

スコア11

test CHANGED
File without changes
test CHANGED
@@ -404,6 +404,8 @@
404
404
 
405
405
 
406
406
 
407
+ //追加コード
408
+
407
409
  jQuery(function($){
408
410
 
409
411
  $('#page-link1').click(function(){

4

javascriptの編集

2019/08/06 03:02

投稿

nakajima4
nakajima4

スコア11

test CHANGED
File without changes
test CHANGED
@@ -406,9 +406,13 @@
406
406
 
407
407
  jQuery(function($){
408
408
 
409
- $('a').click(function(){
409
+ $('#page-link1').click(function(){
410
+
410
-
411
+ $('.tab:first-child').removeClass('is-active');
412
+
413
+ $('.tab:nth-child(3)').addClass('is-active');
414
+
411
- $('.is-show').removeClass('is-show');
415
+ $('.is-show').removeClass('is-show');
412
416
 
413
417
  $('.panel:nth-child(3)').addClass('is-show');
414
418
 

3

javascriptの追加

2019/08/06 02:54

投稿

nakajima4
nakajima4

スコア11

test CHANGED
File without changes
test CHANGED
@@ -404,4 +404,18 @@
404
404
 
405
405
 
406
406
 
407
+ jQuery(function($){
408
+
409
+ $('a').click(function(){
410
+
411
+ $('.is-show').removeClass('is-show');
412
+
413
+ $('.panel:nth-child(3)').addClass('is-show');
414
+
415
+ });
416
+
417
+ });
418
+
419
+
420
+
407
421
  ```

2

文章の修正

2019/08/06 02:13

投稿

nakajima4
nakajima4

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ページ内タブを実装したく下記のサイトを参考にして見た所、タブ1からタブへのページ内リンクが効かなくて困っております。
3
+ ページ内タブを実装したく下記のサイトを参考にして見た所、タブ1からタブへのページ内リンクが効かなくて困っております。
4
4
 
5
5
  https://blog-and-destroy.com/7389
6
6
 

1

cssの追加

2019/08/05 10:27

投稿

nakajima4
nakajima4

スコア11

test CHANGED
File without changes
test CHANGED
@@ -184,7 +184,199 @@
184
184
 
185
185
  ```
186
186
 
187
-
187
+ ```css
188
+
189
+ /* タブ */
190
+
191
+ .tab-group{
192
+
193
+ display: flex;
194
+
195
+ justify-content: center;
196
+
197
+ padding:0;
198
+
199
+ max-width:980px;
200
+
201
+ margin:auto;
202
+
203
+ }
204
+
205
+ .tab{
206
+
207
+ flex-grow: 1;
208
+
209
+ list-style:none;
210
+
211
+ text-align:center;
212
+
213
+ cursor:pointer;
214
+
215
+ width:calc(100% / 7);
216
+
217
+ height:80px;
218
+
219
+ font-size:0.6em;
220
+
221
+ position:relative;
222
+
223
+ padding-top:70px;
224
+
225
+ color:#ccc;
226
+
227
+ box-sizing:border-box;
228
+
229
+ }
230
+
231
+ .panel-group{
232
+
233
+ border-top:none;
234
+
235
+ }
236
+
237
+ .panel{
238
+
239
+ display:none;
240
+
241
+ }
242
+
243
+ .tab.is-active{
244
+
245
+ color:#000;
246
+
247
+ transition: all 0.2s ease-out;
248
+
249
+ }
250
+
251
+ .panel.is-show{
252
+
253
+ display:block;
254
+
255
+ }
256
+
257
+
258
+
259
+ /* タブ内 */
260
+
261
+
262
+
263
+ #group-top{
264
+
265
+ padding-top:120px;
266
+
267
+ margin-top:-120px;
268
+
269
+ }
270
+
271
+ #page-link1{
272
+
273
+ padding-top:20px;
274
+
275
+ margin-top:-20px;
276
+
277
+ }
278
+
279
+ .panel{
280
+
281
+ margin-top:50px;
282
+
283
+ }
284
+
285
+ .box1{
286
+
287
+ background-color:#fbfaf8;
288
+
289
+ padding:50px 0;
290
+
291
+ }
292
+
293
+ .box2{
294
+
295
+ padding:50px 0;
296
+
297
+ }
298
+
299
+
300
+
301
+ h2{
302
+
303
+ font-size:1em;
304
+
305
+ background-color:#1e3c69;
306
+
307
+ color:#fff;
308
+
309
+ line-height:2;
310
+
311
+ padding-left:15px;
312
+
313
+ font-weight:400;
314
+
315
+ max-width:1000px;
316
+
317
+ margin:auto;
318
+
319
+ }
320
+
321
+ h3{
322
+
323
+ font-size:1.4em;
324
+
325
+ color:#1e3c69;
326
+
327
+ font-weight:400;
328
+
329
+ }
330
+
331
+ h4{
332
+
333
+ margin:50px auto 0;
334
+
335
+ border-bottom:dotted 2px #4d4d4d;
336
+
337
+ padding-bottom:20px;
338
+
339
+ }
340
+
341
+ a{
342
+
343
+ text-decoration:none!important;
344
+
345
+ }
346
+
347
+ .support-list{
348
+
349
+ display:block;
350
+
351
+ width:300px;
352
+
353
+ border:solid 1.5px #1e3c69;
354
+
355
+ text-align:center;
356
+
357
+ padding:5px;
358
+
359
+ margin:50px 0 50px auto;
360
+
361
+ color:#1e3c69;
362
+
363
+ box-sizing:border-box;
364
+
365
+ }
366
+
367
+ .container1{
368
+
369
+ max-width:950px;
370
+
371
+ margin:auto;
372
+
373
+ }
374
+
375
+
376
+
377
+
378
+
379
+ ```
188
380
 
189
381
  ```javascript
190
382