teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問js制作した動的ページ？をページ内外リンクで飛べるようにしたい。

編集履歴

質問編集履歴

2

2020/12/29 06:04

投稿

HHH-
HHH-

スコア28

title CHANGED
File without changes
body CHANGED
@@ -23,161 +23,4 @@
23
23
  調べると動的URL云々でよくわかりません！
24
24
 
25
25
  どうすればいいのですが？
26
- また私みたいなケースはJSアンカータグで解決できるのでしょうか…
26
+ また私みたいなケースはJSアンカータグで解決できるのでしょうか…
27
-
28
-
29
- **追記**
30
- ```
31
-
32
-
33
- <ul class="nabox">
34
-
35
- <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
36
- <li style="display: inline-block;">
37
-
38
- <input type="button" class="nab"
39
- value="1"
40
- id="button1"
41
- onclick="disabled = true;
42
- getElementById('button2').disabled = false;
43
- getElementById('button3').disabled = false;
44
- getElementById('button4').disabled = false;
45
- getElementById('button5').disabled = false;">
46
-
47
- </li>
48
- </div>
49
-
50
- <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
51
- <li style="display: inline-block;">
52
-
53
- <input type="button" class="nab"
54
- value="2"
55
- id="button2" disabled
56
- onclick="disabled = true;
57
- getElementById('button1').disabled = false;
58
- getElementById('button3').disabled = false;
59
- getElementById('button4').disabled = false;
60
- getElementById('button5').disabled = false;">
61
-
62
- </li>
63
- </div>
64
-
65
- <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
66
- <li style="display: inline-block;">
67
-
68
- <input type="button" class="nab"
69
- value="3"
70
- id="button3"
71
- onclick="disabled = true;
72
- getElementById('button1').disabled = false;
73
- getElementById('button2').disabled = false;
74
- getElementById('button4').disabled = false;
75
- getElementById('button5').disabled = false;">
76
-
77
- </li>
78
- </div>
79
-
80
- <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
81
- <li style="display: inline-block;">
82
- <a id="ssd"></a>
83
- <input type="button" class="nab"
84
- value="4"
85
- id="button4"
86
- onclick="disabled = true;
87
- getElementById('button1').disabled = false;
88
- getElementById('button2').disabled = false;
89
- getElementById('button3').disabled = false;
90
- getElementById('button5').disabled = false;">
91
-
92
- </li>
93
- </div>
94
-
95
-
96
- <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
97
- <li style="display: inline-block;">
98
-
99
- <input type="button" class="nab"
100
- value="5"
101
- id="button5"
102
- onclick="disabled = true;
103
- getElementById('button1').disabled = false;
104
- getElementById('button2').disabled = false;
105
- getElementById('button3').disabled = false;
106
- getElementById('button4').disabled = false;">
107
-
108
- </li>
109
- </div>
110
-
111
-
112
-
113
- </ul>
114
-
115
- <script id="rendered-js">
116
- console.clear();
117
-
118
- const elPrevButton = document.querySelector('#prev');
119
- const elNextButton = document.querySelector('#next');
120
- const flipping = new Flipping();
121
-
122
- const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
123
- const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
124
-
125
- let state = {
126
- photo: 0 };
127
-
128
-
129
- function send(event) {
130
- // read cuticle positions
131
- flipping.read();
132
-
133
- const elActives = document.querySelectorAll('[data-active]');
134
-
135
- Array.from(elActives).
136
- forEach(el => el.removeAttribute('data-active'));
137
-
138
- switch (event) {
139
- case 'PREV':
140
- state.photo--;
141
- // Math.max(state.photo - 1, 0);
142
- break;
143
- case 'NEXT':
144
- state.photo++;
145
- // Math.min(state.photo + 1, elImages.length - 1);
146
- break;
147
- default:
148
- state.photo = +event;
149
- break;}
150
-
151
-
152
- var len = elImages.length;
153
- // Loop Around
154
- //state.photo = ( ( state.photo % len) + len ) % len;
155
- state.photo = Math.max(0, Math.min(state.photo, len - 1));
156
-
157
- Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)).
158
- forEach(el => {
159
- el.setAttribute('data-active', true);
160
- });
161
-
162
- // execute the FLIP animation
163
- flipping.flip();
164
- }
165
-
166
- elThumbnails.forEach(thumb => {
167
- thumb.addEventListener('click', () => {
168
- send(thumb.dataset.key);
169
- });
170
- });
171
-
172
- elPrevButton.addEventListener('click', () => {
173
- send('PREV');
174
- });
175
-
176
- elNextButton.addEventListener('click', () => {
177
- send('NEXT');
178
- });
179
-
180
- send(0);
181
- //# sourceURL=pen.js
182
- </script>
183
- ```

1

追記

2020/12/29 06:04

投稿

HHH-
HHH-

スコア28

title CHANGED
File without changes
body CHANGED
@@ -23,4 +23,161 @@
23
23
  調べると動的URL云々でよくわかりません！
24
24
 
25
25
  どうすればいいのですが？
26
- また私みたいなケースはJSアンカータグで解決できるのでしょうか…
26
+ また私みたいなケースはJSアンカータグで解決できるのでしょうか…
27
+
28
+
29
+ **追記**
30
+ ```
31
+
32
+
33
+ <ul class="nabox">
34
+
35
+ <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
36
+ <li style="display: inline-block;">
37
+
38
+ <input type="button" class="nab"
39
+ value="1"
40
+ id="button1"
41
+ onclick="disabled = true;
42
+ getElementById('button2').disabled = false;
43
+ getElementById('button3').disabled = false;
44
+ getElementById('button4').disabled = false;
45
+ getElementById('button5').disabled = false;">
46
+
47
+ </li>
48
+ </div>
49
+
50
+ <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
51
+ <li style="display: inline-block;">
52
+
53
+ <input type="button" class="nab"
54
+ value="2"
55
+ id="button2" disabled
56
+ onclick="disabled = true;
57
+ getElementById('button1').disabled = false;
58
+ getElementById('button3').disabled = false;
59
+ getElementById('button4').disabled = false;
60
+ getElementById('button5').disabled = false;">
61
+
62
+ </li>
63
+ </div>
64
+
65
+ <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
66
+ <li style="display: inline-block;">
67
+
68
+ <input type="button" class="nab"
69
+ value="3"
70
+ id="button3"
71
+ onclick="disabled = true;
72
+ getElementById('button1').disabled = false;
73
+ getElementById('button2').disabled = false;
74
+ getElementById('button4').disabled = false;
75
+ getElementById('button5').disabled = false;">
76
+
77
+ </li>
78
+ </div>
79
+
80
+ <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
81
+ <li style="display: inline-block;">
82
+ <a id="ssd"></a>
83
+ <input type="button" class="nab"
84
+ value="4"
85
+ id="button4"
86
+ onclick="disabled = true;
87
+ getElementById('button1').disabled = false;
88
+ getElementById('button2').disabled = false;
89
+ getElementById('button3').disabled = false;
90
+ getElementById('button5').disabled = false;">
91
+
92
+ </li>
93
+ </div>
94
+
95
+
96
+ <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
97
+ <li style="display: inline-block;">
98
+
99
+ <input type="button" class="nab"
100
+ value="5"
101
+ id="button5"
102
+ onclick="disabled = true;
103
+ getElementById('button1').disabled = false;
104
+ getElementById('button2').disabled = false;
105
+ getElementById('button3').disabled = false;
106
+ getElementById('button4').disabled = false;">
107
+
108
+ </li>
109
+ </div>
110
+
111
+
112
+
113
+ </ul>
114
+
115
+ <script id="rendered-js">
116
+ console.clear();
117
+
118
+ const elPrevButton = document.querySelector('#prev');
119
+ const elNextButton = document.querySelector('#next');
120
+ const flipping = new Flipping();
121
+
122
+ const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
123
+ const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
124
+
125
+ let state = {
126
+ photo: 0 };
127
+
128
+
129
+ function send(event) {
130
+ // read cuticle positions
131
+ flipping.read();
132
+
133
+ const elActives = document.querySelectorAll('[data-active]');
134
+
135
+ Array.from(elActives).
136
+ forEach(el => el.removeAttribute('data-active'));
137
+
138
+ switch (event) {
139
+ case 'PREV':
140
+ state.photo--;
141
+ // Math.max(state.photo - 1, 0);
142
+ break;
143
+ case 'NEXT':
144
+ state.photo++;
145
+ // Math.min(state.photo + 1, elImages.length - 1);
146
+ break;
147
+ default:
148
+ state.photo = +event;
149
+ break;}
150
+
151
+
152
+ var len = elImages.length;
153
+ // Loop Around
154
+ //state.photo = ( ( state.photo % len) + len ) % len;
155
+ state.photo = Math.max(0, Math.min(state.photo, len - 1));
156
+
157
+ Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)).
158
+ forEach(el => {
159
+ el.setAttribute('data-active', true);
160
+ });
161
+
162
+ // execute the FLIP animation
163
+ flipping.flip();
164
+ }
165
+
166
+ elThumbnails.forEach(thumb => {
167
+ thumb.addEventListener('click', () => {
168
+ send(thumb.dataset.key);
169
+ });
170
+ });
171
+
172
+ elPrevButton.addEventListener('click', () => {
173
+ send('PREV');
174
+ });
175
+
176
+ elNextButton.addEventListener('click', () => {
177
+ send('NEXT');
178
+ });
179
+
180
+ send(0);
181
+ //# sourceURL=pen.js
182
+ </script>
183
+ ```