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

回答編集履歴

1

ちょうせい

2019/10/28 03:19

投稿

yambejp
yambejp

スコア117942

answer CHANGED
@@ -14,4 +14,30 @@
14
14
  <div class="top_page page2">PAGE 2</div>
15
15
  <div class="top_page page3">PAGE 3</div>
16
16
  </main>
17
+ ```
18
+
19
+ # 調整版
20
+ 仕様がよくわからないのですが、こういうことですか?
21
+ - 初期状態ではどこもactive/noneではない
22
+ - クリックするとそこがactiveになって残りはnone
23
+ - activeをクリックするとどこもactive/noneではなくなる
24
+
25
+ ```javascript
26
+ <script>
27
+ $(function() {
28
+ $('.top_page').on('click',function(){
29
+ if($(this).is('.active')){
30
+ $('.top_page').removeClass('active none');
31
+ }else{
32
+ $(this).addClass('active').removeClass('none');
33
+ $('.top_page').not(this).removeClass('active').addClass('none');
34
+ }
35
+ });
36
+ });
37
+ </script>
38
+ <main id="main-container">
39
+ <div class="top_page page1">PAGE 1</div>
40
+ <div class="top_page page2">PAGE 2</div>
41
+ <div class="top_page page3">PAGE 3</div>
42
+ </main>
17
43
  ```