teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問タブをクリックすると上部にスクロールされてしまう

編集履歴

質問編集履歴

12

編集

2017/02/09 04:58

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
File without changes

11

更新

2017/02/09 04:58

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -202,7 +202,11 @@
202
202
 
203
203
 
204
204
 
205
- **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
205
+ **a要素でクリックせずに～**を試しました
206
+
207
+ **解決できましたー(^^)/**
208
+
209
+
206
210
 
207
211
  ```ここに言語を入力
208
212
 

10

修正

2017/02/08 08:27

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -214,7 +214,7 @@
214
214
 
215
215
  $("#tabcontents div").hide();
216
216
 
217
- $( $( this ).data( 'data-href') ).show();
217
+ $( $( this ).data( 'href') ).show();
218
218
 
219
219
  $(".current").removeClass("current");
220
220
 

9

編集

2017/02/08 08:24

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -200,6 +200,8 @@
200
200
 
201
201
  **＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追加＝＝＝＝＝＝＝**
202
202
 
203
+
204
+
203
205
  **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
204
206
 
205
207
  ```ここに言語を入力

8

追加

2017/02/08 08:14

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -191,3 +191,113 @@
191
191
  ちなみに、<ul class="tab">としたら、タブのスクロールは解決しましたが、
192
192
 
193
193
  タブ下の表示部分が崩れました( ﾉД`)ｼｸｼｸ…
194
+
195
+
196
+
197
+
198
+
199
+
200
+
201
+ **＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追加＝＝＝＝＝＝＝**
202
+
203
+ **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
204
+
205
+ ```ここに言語を入力
206
+
207
+ $(function(){
208
+
209
+ $('#tabcontents div[id != "tab01"]').hide();
210
+
211
+ $( 'span[data-href]' ).on( 'click', function() {
212
+
213
+ $("#tabcontents div").hide();
214
+
215
+ $( $( this ).data( 'data-href') ).show();
216
+
217
+ $(".current").removeClass("current");
218
+
219
+ $(this).addClass("current");
220
+
221
+ return false;
222
+
223
+ });
224
+
225
+ });
226
+
227
+ ```
228
+
229
+
230
+
231
+ ```ここに言語を入力
232
+
233
+ <section id="tabindex">
234
+
235
+
236
+
237
+ <ul>
238
+
239
+ <li><span data-href="#tab01" class="current">color</span></li>
240
+
241
+ <li><span data-href="#tab02" class="">size</span></li>
242
+
243
+ <li><span data-href="#tab03" class="">Material</span></li>
244
+
245
+ <li><span data-href="#tab04" class="">Country</span></li>
246
+
247
+ <li><span data-href="#tab05" class="">aa</span></li>
248
+
249
+ </ul>
250
+
251
+
252
+
253
+ <div id="tabcontents">
254
+
255
+ <div id="tab01">
256
+
257
+ <p>
258
+
259
+ <strong>Blue/Red/White</strong></p>
260
+
261
+ <p></p>
262
+
263
+ </div>
264
+
265
+ <div id="tab02">
266
+
267
+ <p><strong>36・38・40</strong></p>
268
+
269
+ <p></p>
270
+
271
+ </div>
272
+
273
+ <div id="tab03">
274
+
275
+ <p><strong>cotton 100%</strong></p>
276
+
277
+ <p></p>
278
+
279
+ </div>
280
+
281
+ <div id="tab04">
282
+
283
+ <p><strong>Japan</strong></p>
284
+
285
+ <p></p>
286
+
287
+ </div>
288
+
289
+ <div id="tab05">
290
+
291
+ <p><strong>aaa</strong></p>
292
+
293
+ <p></p>
294
+
295
+ </div>
296
+
297
+ </div>
298
+
299
+
300
+
301
+ </section>
302
+
303
+ ```

7

編集

2017/02/08 08:11

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -16,17 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- ネットで色々調べ、スクロールのJSとバッティングしているとかの記事を見つけ、
20
-
21
- $("a" + "a:not(.non-scroll)")や
22
-
23
- $("a[href^=#]:not(.non-scroll)")
24
-
25
- としてみたのですが、うまくいきません( ﾉД`)ｼｸｼｸ…
26
-
27
-
28
-
29
- 何かいい方法教えいただけませんでしょうか？<(_ _)>
19
+ 何かいい解決方法教えいただけませんでしょうか？<(_ _)>
30
20
 
31
21
 
32
22
 

6

修正

2017/02/08 06:15

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- はじめまして。JQ初心者です。
1
+ はじめまして。jQuery初心者です。
2
2
 
3
3
  http://www.aiship.jp/knowhow/archives/28160
4
4
 

5

修正

2017/02/08 06:14

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -150,7 +150,7 @@
150
150
 
151
151
  <p>
152
152
 
153
- <img src="../../../Content/img/content/english/mail/point01_pc.png" alt=""/> <strong>Blue/Red/White</strong></p>
153
+ <strong>Blue/Red/White</strong></p>
154
154
 
155
155
  <p></p>
156
156
 

4

htmlの追加

2017/02/08 06:13

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -40,9 +40,9 @@
40
40
 
41
41
 
42
42
 
43
- common.jsファイル
43
+ **common.js**ファイル
44
-
45
- －－－－－－－－－－－－－－－
44
+
45
+
46
46
 
47
47
  ```ここに言語を入力
48
48
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  ```
72
72
 
73
- －－－－－－－－－－－－－－－
73
+
74
74
 
75
75
  という記載があり、どうやらこれが影響しているようです。
76
76
 
@@ -88,9 +88,9 @@
88
88
 
89
89
 
90
90
 
91
- 出来れば、test.jsファイル(以下、記載)内で解決したく、
91
+ 出来れば、**test.js**ファイル(以下、記載)内で解決したく、
92
-
93
- －－－－－－－－－－－－－－－
92
+
93
+
94
94
 
95
95
  ```ここに言語を入力
96
96
 
@@ -116,6 +116,88 @@
116
116
 
117
117
  ```
118
118
 
119
- －－－－－－－－－－－－－－－
119
+
120
120
 
121
121
  上記記載内で解決できませんでしょうか？
122
+
123
+
124
+
125
+ htmlも念のため記載しておきます
126
+
127
+ ```ここに言語を入力
128
+
129
+ <section id="tabindex">
130
+
131
+ <ul>
132
+
133
+ <li><a href="#tab01" class="current">color</a></li>
134
+
135
+ <li><a href="#tab02" class="">size</a></li>
136
+
137
+ <li><a href="#tab03" class="">Material</a></li>
138
+
139
+ <li><a href="#tab04" class="">Country</a></li>
140
+
141
+ <li><a href="#tab05" class="">aa</a></li>
142
+
143
+ </ul>
144
+
145
+
146
+
147
+ <div id="tabcontents">
148
+
149
+ <div id="tab01">
150
+
151
+ <p>
152
+
153
+ <img src="../../../Content/img/content/english/mail/point01_pc.png" alt=""/> <strong>Blue/Red/White</strong></p>
154
+
155
+ <p></p>
156
+
157
+ </div>
158
+
159
+ <div id="tab02">
160
+
161
+ <p><strong>36・38・40</strong></p>
162
+
163
+ <p></p>
164
+
165
+ </div>
166
+
167
+ <div id="tab03">
168
+
169
+ <p><strong>cotton 100%</strong></p>
170
+
171
+ <p></p>
172
+
173
+ </div>
174
+
175
+ <div id="tab04">
176
+
177
+ <p><strong>Japan</strong></p>
178
+
179
+ <p></p>
180
+
181
+ </div>
182
+
183
+ <div id="tab05">
184
+
185
+ <p><strong>aaa</strong></p>
186
+
187
+ <p></p>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+
194
+
195
+ </section>
196
+
197
+ ```
198
+
199
+
200
+
201
+ ちなみに、<ul class="tab">としたら、タブのスクロールは解決しましたが、
202
+
203
+ タブ下の表示部分が崩れました( ﾉД`)ｼｸｼｸ…

3

コードの表記修正

2017/02/08 06:12

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -44,6 +44,8 @@
44
44
 
45
45
  －－－－－－－－－－－－－－－
46
46
 
47
+ ```ここに言語を入力
48
+
47
49
  // smooth scroll
48
50
 
49
51
  $(function(){
@@ -65,6 +67,8 @@
65
67
  });
66
68
 
67
69
  });
70
+
71
+ ```
68
72
 
69
73
  －－－－－－－－－－－－－－－
70
74
 
@@ -88,6 +92,8 @@
88
92
 
89
93
  －－－－－－－－－－－－－－－
90
94
 
95
+ ```ここに言語を入力
96
+
91
97
  $(function(){
92
98
 
93
99
  $('#tabcontents div[id != "tab01"]').hide();
@@ -108,6 +114,8 @@
108
114
 
109
115
  });
110
116
 
117
+ ```
118
+
111
119
  －－－－－－－－－－－－－－－
112
120
 
113
121
  上記記載内で解決できませんでしょうか？

2

タグ修正

2017/02/08 05:42

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  $(function(){
50
50
 
51
- $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
51
+ $('a[href^=#]').not('#header a,.tab li a,').click(function(){
52
52
 
53
53
  var speed = 500;
54
54
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  という記載があり、どうやらこれが影響しているようです。
72
72
 
73
- $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
73
+ $('a[href^=#]').not('#header a,.tab li a,').click(function(){
74
74
 
75
75
  を、
76
76
 

1

タグの追加

2017/02/08 05:41

投稿

kita
kita

スコア12

test CHANGED
File without changes
test CHANGED
@@ -27,3 +27,87 @@
27
27
 
28
28
 
29
29
  何かいい方法教えいただけませんでしょうか？<(_ _)>
30
+
31
+
32
+
33
+
34
+
35
+ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
36
+
37
+ (追加)
38
+
39
+ すみません。少し原因が分かってきました。
40
+
41
+
42
+
43
+ common.jsファイル
44
+
45
+ －－－－－－－－－－－－－－－
46
+
47
+ // smooth scroll
48
+
49
+ $(function(){
50
+
51
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
52
+
53
+ var speed = 500;
54
+
55
+ var href= $(this).attr("href");
56
+
57
+ var target = $(href == "#" || href == "" ? 'html' : href);
58
+
59
+ var position = target.offset().top - 100;
60
+
61
+ $("html, body").animate({scrollTop:position}, speed, "swing");
62
+
63
+ return false;
64
+
65
+ });
66
+
67
+ });
68
+
69
+ －－－－－－－－－－－－－－－
70
+
71
+ という記載があり、どうやらこれが影響しているようです。
72
+
73
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
74
+
75
+ を、
76
+
77
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
78
+
79
+ と書き換えれば、問題は解決するのですが、
80
+
81
+ このcommon.jsファイル事態を触ることが禁止されています。
82
+
83
+
84
+
85
+
86
+
87
+ 出来れば、test.jsファイル(以下、記載)内で解決したく、
88
+
89
+ －－－－－－－－－－－－－－－
90
+
91
+ $(function(){
92
+
93
+ $('#tabcontents div[id != "tab01"]').hide();
94
+
95
+ $("a").click(function(){
96
+
97
+ $("#tabcontents div").hide();
98
+
99
+ $($(this).attr("href")).show();
100
+
101
+ $(".current").removeClass("current");
102
+
103
+ $(this).addClass("current");
104
+
105
+ return false;
106
+
107
+ });
108
+
109
+ });
110
+
111
+ －－－－－－－－－－－－－－－
112
+
113
+ 上記記載内で解決できませんでしょうか？