質問編集履歴

3

画像変更

2017/06/22 06:56

投稿

asami12
asami12

スコア12

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,11 @@
16
16
 
17
17
 
18
18
 
19
- ![イメージ説明](8c4e79918e5226dc7cd80cccf48fa993.jpeg)
19
+ ![![イメージ説明](f7bc3e486a44f080b9067a4aa56baf43.jpeg)
20
+
21
+
22
+
23
+
20
24
 
21
25
 
22
26
 

2

変更

2017/06/22 06:55

投稿

asami12
asami12

スコア12

test CHANGED
File without changes
test CHANGED
@@ -12,15 +12,13 @@
12
12
 
13
13
  ###したいこと
14
14
 
15
- - 別ページからのリンクで該当のタブを開いた状態でページが切り替わる
16
-
17
15
  - 同ページからでもスクロールしてタブを開きたい(同ページアンカーリンク)
18
16
 
19
17
 
20
18
 
21
-
22
-
23
- ![イメージ説明](f88034128c47b4a97644ec19db9f5922.jpeg)
19
+ ![イメージ説明](8c4e79918e5226dc7cd80cccf48fa993.jpeg)
20
+
21
+
24
22
 
25
23
 
26
24
 
@@ -28,9 +26,9 @@
28
26
 
29
27
  ページ上部からタブまでは画面には入り切らないので枠分けしたテキストリンクを置きたいと思っています。
30
28
 
31
- 別ページからのリンクで該当のタブを開いた状態でページが切り替わるようにはできるのですが、
29
+ 別ページ(B.html)からのリンクで該当のタブを開いた状態でページが切り替わるようにはできるのですが、
32
-
30
+
33
- 同ページではクリックしたらスクロールして該当タブが開くようにするにはどうすればいいのか分かりません。
31
+ 同ページ(A.html)ではクリックしたらスクロールして該当タブが開くようにするにはどうすればいいのか分かりません。
34
32
 
35
33
 
36
34
 
@@ -40,8 +38,6 @@
40
38
 
41
39
  【参考にしたサイト】
42
40
 
43
- [他ページから指定したタブへダイレクトリンク](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10109688145)
44
-
45
41
  [ページ内スクロール](http://memo.ravenalala.org/scroll-to-anchor/)
46
42
 
47
43
  [ページ内リンクのずれ](https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html)
@@ -56,8 +52,6 @@
56
52
 
57
53
  <div id="worktab">
58
54
 
59
-
60
-
61
55
  <ul class="tablabel clearfix">
62
56
 
63
57
  <li class="active"><a href="#pannel1">pannel1</a></li>
@@ -120,8 +114,6 @@
120
114
 
121
115
  }
122
116
 
123
-
124
-
125
117
  ul.tablabel{
126
118
 
127
119
  margin: 60px 0 0px;
@@ -130,8 +122,6 @@
130
122
 
131
123
  }
132
124
 
133
-
134
-
135
125
  .tablabel li {
136
126
 
137
127
  float: left;
@@ -184,8 +174,6 @@
184
174
 
185
175
  }
186
176
 
187
-
188
-
189
177
  .pannel {
190
178
 
191
179
  display: none;
@@ -204,12 +192,8 @@
204
192
 
205
193
  $(function(){
206
194
 
207
-
208
-
209
195
  var activepanelId = $("#worktab .active a").attr("href");
210
196
 
211
-
212
-
213
197
  $("#worktab .pannel > div:not(" + activepanelId + ")").hide();
214
198
 
215
199
  $("#worktab > ul li a").click(function(){
@@ -252,6 +236,16 @@
252
236
 
253
237
 
254
238
 
239
+ テキストリンク
240
+
241
+ ```html
242
+
243
+ <li><a href="A.html#pannel1">リンク1</a></li>
244
+
245
+ <li><a href="A.html#pannel2">リンク2</a></li>
246
+
247
+ ```
248
+
255
249
  分かる方いらっしゃいましたらご教授頂きたいと存じます。
256
250
 
257
251
  よろしくお願いいたします。
@@ -262,20 +256,6 @@
262
256
 
263
257
  追記
264
258
 
265
-
266
-
267
- 初期は画像で言うとどのページもリンク1が開いている状態です。別ページ(例:Cページ)からAページリンク2を開いた場合はAページリンク2が開いていて目視できる状態です。同ページ(例:Aページ)を開いていてテキストリンクからリンク2をクリックしてもスクロールもしないし、タブも開かない状態です。
268
-
269
-
270
-
271
- ちなみにテキストリンクは下記です。
272
-
273
- ```html
274
-
275
- <li><a href="A.html#pannel1">リンク1</a></li>
276
-
277
- <li><a href="A.html#pannel2">リンク2</a></li>
278
-
279
- ```
280
-
281
- 同ページでアンカーリンクさせるにはテキストリンクはどうすればいいのでしょうか?
259
+ 同ページ(A.html)でアンカーリンクさせるにはテキストリンクはどうすればいいのでしょうか?
260
+
261
+ このコードにどう追記してScriptを動作させればいいのか分かりません。

1

追記しました

2017/06/22 06:46

投稿

asami12
asami12

スコア12

test CHANGED
File without changes
test CHANGED
@@ -206,11 +206,11 @@
206
206
 
207
207
 
208
208
 
209
- var activepannelId = $("#worktab .active a").attr("href");
209
+ var activepanelId = $("#worktab .active a").attr("href");
210
-
211
-
212
-
210
+
211
+
212
+
213
- $("#worktab .pannel > div:not(" + activepannelId + ")").hide();
213
+ $("#worktab .pannel > div:not(" + activepanelId + ")").hide();
214
214
 
215
215
  $("#worktab > ul li a").click(function(){
216
216
 
@@ -255,3 +255,27 @@
255
255
  分かる方いらっしゃいましたらご教授頂きたいと存じます。
256
256
 
257
257
  よろしくお願いいたします。
258
+
259
+
260
+
261
+
262
+
263
+ 追記
264
+
265
+
266
+
267
+ 初期は画像で言うとどのページもリンク1が開いている状態です。別ページ(例:Cページ)からAページリンク2を開いた場合はAページリンク2が開いていて目視できる状態です。同ページ(例:Aページ)を開いていてテキストリンクからリンク2をクリックしてもスクロールもしないし、タブも開かない状態です。
268
+
269
+
270
+
271
+ ちなみにテキストリンクは下記です。
272
+
273
+ ```html
274
+
275
+ <li><a href="A.html#pannel1">リンク1</a></li>
276
+
277
+ <li><a href="A.html#pannel2">リンク2</a></li>
278
+
279
+ ```
280
+
281
+ 同ページでアンカーリンクさせるにはテキストリンクはどうすればいいのでしょうか?