teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

chousei

2018/12/06 08:10

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -34,4 +34,26 @@
34
34
  <div class="item"><a href="modal_B.html">2のページ</a></div>
35
35
  <div class="item"><a href="modal_C.html">3のページ</a></div>
36
36
  </div>
37
+ ```
38
+
39
+ # 調整版
40
+ .itemは消さない。付け足した#contentsは削除
41
+
42
+ ```javascript
43
+ $(function(){
44
+ $('.item a').on('click',function(e){
45
+ e.preventDefault();
46
+ if($(this).closest('.item').next().filter('#contents').length>0){
47
+ $('#contents').remove();
48
+ }else{
49
+ $.ajax({
50
+ url:$(this).attr('href'),
51
+ dataType:'html',
52
+ }).done(function(html){
53
+ $('#contents').remove();
54
+ $(e.target).closest('.item').after($('<div id="contents">').append(html));
55
+ });
56
+ }
57
+ });
58
+ });
37
59
  ```

3

調整

2018/12/06 08:09

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -24,7 +24,7 @@
24
24
  url:$(this).attr('href'),
25
25
  dataType:'html',
26
26
  }).done(function(html){
27
- $(e.target).after(html).closest('.item').siblings().remove();
27
+ $(e.target).after($('<div id="contents">').append(html)).closest('.item').siblings().remove();
28
28
  });
29
29
  });
30
30
  });

2

tyぽ

2018/12/06 07:37

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -30,7 +30,7 @@
30
30
  });
31
31
  </script>
32
32
  <div class="gnavi">
33
- <div class="item"><a href="y.php">1のページ</a></div>
33
+ <div class="item"><a href="modal_A.html">1のページ</a></div>
34
34
  <div class="item"><a href="modal_B.html">2のページ</a></div>
35
35
  <div class="item"><a href="modal_C.html">3のページ</a></div>
36
36
  </div>

1

調整

2018/12/06 07:35

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -12,4 +12,26 @@
12
12
  <div id="contents">(modal_A.htmlの内容)</div>
13
13
  </div>
14
14
  ```
15
- のようになるということでしょうか?
15
+ のようになるということでしょうか?
16
+
17
+ # sample
18
+ ```javascript
19
+ <script>
20
+ $(function(){
21
+ $('.item a').on('click',function(e){
22
+ e.preventDefault();
23
+ $.ajax({
24
+ url:$(this).attr('href'),
25
+ dataType:'html',
26
+ }).done(function(html){
27
+ $(e.target).after(html).closest('.item').siblings().remove();
28
+ });
29
+ });
30
+ });
31
+ </script>
32
+ <div class="gnavi">
33
+ <div class="item"><a href="y.php">1のページ</a></div>
34
+ <div class="item"><a href="modal_B.html">2のページ</a></div>
35
+ <div class="item"><a href="modal_C.html">3のページ</a></div>
36
+ </div>
37
+ ```