回答編集履歴

5

ねんのため

2018/05/01 12:12

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -195,3 +195,85 @@
195
195
  </div>
196
196
 
197
197
  ```
198
+
199
+
200
+
201
+ # ローレベル処理
202
+
203
+ 念の為もっとローレベルな処理を書いておきます
204
+
205
+ これならIEの相当古いバージョンでも動作します
206
+
207
+
208
+
209
+ ```javascript
210
+
211
+ <script>
212
+
213
+ window.onload= function(){
214
+
215
+ var obj=document.getElementById('top-nav').getElementsByTagName('li');
216
+
217
+ for(var i=0;i<obj.length;i++){
218
+
219
+ var x=obj[i];
220
+
221
+ var links ={
222
+
223
+ "contact_form":"contact.html",
224
+
225
+ "privacypolicy":"privacypolicy.html"
226
+
227
+ };
228
+
229
+ var id=x.getAttribute("id");
230
+
231
+ var str="";
232
+
233
+ for(var j in links){
234
+
235
+ if(str!=="") str+="|";
236
+
237
+ str+=j;
238
+
239
+ }
240
+
241
+ var reg=new RegExp("^"+str+"$");
242
+
243
+ if(id.match(reg)){
244
+
245
+ var link1 = x.innerHTML;
246
+
247
+ var aTag = document.createElement("a");
248
+
249
+ aTag.setAttribute("href",links[id]);
250
+
251
+ aTag.appendChild(document.createTextNode(link1));
252
+
253
+ x.innerHTML="";
254
+
255
+ x.appendChild(aTag);
256
+
257
+ }
258
+
259
+ };
260
+
261
+ };
262
+
263
+ </script>
264
+
265
+ <div id="top-nav">
266
+
267
+ <ul id="fixed-nav">
268
+
269
+ <li id="contact_form">お問い合わせはコチラ</li>
270
+
271
+ <li id="privacypolicy">プライバシーポリシー</li>
272
+
273
+ <li id="test">テスト</li>
274
+
275
+ </ul>
276
+
277
+ </div>
278
+
279
+ ```

4

修正

2018/05/01 12:12

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -127,3 +127,71 @@
127
127
  </div>
128
128
 
129
129
  ```
130
+
131
+
132
+
133
+ # 法則性がない
134
+
135
+
136
+
137
+ 法則性がないなら、リストを羅列するしか無いですね
138
+
139
+
140
+
141
+ ```javascript
142
+
143
+ <script>
144
+
145
+ window.addEventListener('DOMContentLoaded', function(e){
146
+
147
+ [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
148
+
149
+ var links ={
150
+
151
+ "contact_form":"contact.html",
152
+
153
+ "privacypolicy":"privacypolicy.html",
154
+
155
+ };
156
+
157
+ var id=x.getAttribute("id");
158
+
159
+ var reg=new RegExp("^"+Object.keys(links).join("|")+"$");
160
+
161
+ if(id.match(reg)){
162
+
163
+ var link1 = x.textContent;
164
+
165
+ var aTag = document.createElement("a");
166
+
167
+ aTag.setAttribute("href",links[id]);
168
+
169
+ aTag.appendChild(document.createTextNode(link1));
170
+
171
+ x.textContent="";
172
+
173
+ x.appendChild(aTag);
174
+
175
+ }
176
+
177
+ });
178
+
179
+ });
180
+
181
+ </script>
182
+
183
+ <div id="top-nav">
184
+
185
+ <ul id="fixed-nav">
186
+
187
+ <li id="contact_form">お問い合わせはコチラ</li>
188
+
189
+ <li id="privacypolicy">プライバシーポリシー</li>
190
+
191
+ <li id="test">テスト</li>
192
+
193
+ </ul>
194
+
195
+ </div>
196
+
197
+ ```

3

typo

2018/05/01 11:34

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  var linkBasename = "contact";
82
82
 
83
- var linkExtendname = ".html";
83
+ var linkExtension = ".html";
84
84
 
85
85
  var link1 = x.textContent;
86
86
 
@@ -88,7 +88,7 @@
88
88
 
89
89
  var aTag = document.createElement("a");
90
90
 
91
- aTag.setAttribute("href",linkBasename+r[1]+linkExtendname)
91
+ aTag.setAttribute("href",linkBasename+r[1]+linkExtension)
92
92
 
93
93
  aTag.appendChild(document.createTextNode(link1));
94
94
 

2

修正

2018/05/01 11:03

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -63,3 +63,67 @@
63
63
  </div>
64
64
 
65
65
  ```
66
+
67
+
68
+
69
+ # 修正
70
+
71
+ idのcontact_form以降の数値を利用してconctactxxx.htmlにリンクを張ればいいのですね?
72
+
73
+ ```javascript
74
+
75
+ <script>
76
+
77
+ window.addEventListener('DOMContentLoaded', function(e){
78
+
79
+ [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
80
+
81
+ var linkBasename = "contact";
82
+
83
+ var linkExtendname = ".html";
84
+
85
+ var link1 = x.textContent;
86
+
87
+ if(r=x.getAttribute('id').match(/^contact_form(.+)$/)){
88
+
89
+ var aTag = document.createElement("a");
90
+
91
+ aTag.setAttribute("href",linkBasename+r[1]+linkExtendname)
92
+
93
+ aTag.appendChild(document.createTextNode(link1));
94
+
95
+ x.textContent="";
96
+
97
+ x.appendChild(aTag);
98
+
99
+ };
100
+
101
+ });
102
+
103
+ });
104
+
105
+ </script>
106
+
107
+ <div id="top-nav">
108
+
109
+ <ul>
110
+
111
+ <li id="contact_form1">お問い合わせ1</li>
112
+
113
+ <li id="contact_form2">お問い合わせ2</li>
114
+
115
+ <li id="contact_form3">お問い合わせ3</li>
116
+
117
+ <li id="contact_form4">お問い合わせ4</li>
118
+
119
+ <li id="contact_form5">お問い合わせ5</li>
120
+
121
+ <li id="contact_form6">お問い合わせ6</li>
122
+
123
+ <li id="contact_form100">お問い合わせ100</li>
124
+
125
+ </ul>
126
+
127
+ </div>
128
+
129
+ ```

1

追記

2018/05/01 11:01

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -7,3 +7,59 @@
7
7
 
8
8
 
9
9
  のどれかになるでしょう
10
+
11
+ # 追記
12
+
13
+ とりあえず,top-navのliをひろってみます
14
+
15
+
16
+
17
+ ```javascript
18
+
19
+ <script>
20
+
21
+ window.addEventListener('DOMContentLoaded', function(e){
22
+
23
+ [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
24
+
25
+ var linkURL = "contact.html";
26
+
27
+ var link1 = x.textContent;
28
+
29
+ var aTag = document.createElement("a");
30
+
31
+ aTag.setAttribute("href",linkURL)
32
+
33
+ aTag.appendChild(document.createTextNode(link1));
34
+
35
+ x.textContent="";
36
+
37
+ x.appendChild(aTag);
38
+
39
+ });
40
+
41
+ });
42
+
43
+ </script>
44
+
45
+ <div id="top-nav">
46
+
47
+ <ul>
48
+
49
+ <li id="contact_form1">お問い合わせ1</li>
50
+
51
+ <li id="contact_form2">お問い合わせ2</li>
52
+
53
+ <li id="contact_form3">お問い合わせ3</li>
54
+
55
+ <li id="contact_form4">お問い合わせ4</li>
56
+
57
+ <li id="contact_form5">お問い合わせ5</li>
58
+
59
+ <li id="contact_form6">お問い合わせ6</li>
60
+
61
+ </ul>
62
+
63
+ </div>
64
+
65
+ ```