navのタブメニューの要素が、ずっと表示されてしまいます。

navのtab-changeクラスにおいて、#howtoseeを、タブがクリックした時だけ表示するようにしたいのですが、他の２つの#this-weekと#todayをクリックした時も、それぞれの要素と重なってずっと表示されてしまいます。どうしたら、#howtoseeの中身をを、#howtoseeタブをクリックした時だけ表示できるでしょうか？
お分かりになる方、どこを変えればいいのか教えていただきたいです。よろしくお願いいたします。

追記:ブラウザ Google Chrome 59.0.3071.115(最新)

文字数の関係で入りきらなかったので、HTMLだけ別に投稿させていただきました。
（https://teratail.com/questions/83617?modal=q-comp）

CSS
1@charset "UTF-8";
2
3/*PC用*/
4
5@media (min-width:481px){
6
7body{
8
9    background-color: #f9fbfe;
10    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",serif!important;
11}
12    /* --- ヘッダー --- */
13    .header{
14        position: fixed;
15        width: 100%;
16        height: 85px;
17        margin: 0px;
18        padding: 0px;
19        background-color: #ffffff;
20        z-index: 9999;
21        top: 0px;
22        left: 0px;
23    }
24    .header h1,img{
25        width: 250px;
26        margin: 0px 0px 0px 6%;
27        float: left;
28    }
29    .header nav{
30        padding-right: 6%;
31    }
32    .header li{
33        width: 180px;
34        padding: 0px;
35        margin: 0px;
36        font-size: 15px;
37        color: #3d9ec7;
38        list-style: none;
39        text-align: center;
40    }
41    
42    /*ページをクリックした後も、文字色を変えないでおく*/
43    
44    .header li :visited{
45        color: #3d9ec7;
46    }
47    .header_item{
48        display: inline;
49        float: right;
50    }
51
52  /* ヘッダーのナビをPCの時は表示させる */
53 .menu-pc{
54   display:inline-block;
55 }
56/*スマホ用のハンバーガーボタンをPCの時は非表示にする*/
57  #menu{
58    display:none;
59  }
60
61 /*ハンバーガーボタンを開いた際の「元に戻る」という文を非表示にする*/   
62 .return{
63      display:none;
64    }
65
66/*  メイン */
67    .main{
68        width: 100%;
69        height: 1000px;
70        padding: 100px 0px;
71        margin: 0px;
72
73    }
74
75
76@font-face {
77      font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",serif!important";
78      src: url("font.eot?") format('eot');
79      src: url("font.eot?#iefix") format('embedded-opentype'),
80           url("font.woff") format('woff'),
81           url("font.ttf")  format('truetype');
82    }
83
84    img {
85   max-width : 100% ;
86   height : auto ;
87   }
88
89
90
91    .photo-title{
92     font-size:25px;
93     margin-left:150px;
94     border-bottom:3px solid #23c1ea;
95     width:375px;
96     max-width: 100%;
97     height: auto;
98    }
99
100    .whole-photo{
101      margin-left:70px;
102      margin-top: 50px;
103      position:relative;
104
105    }
106
107.whole-photo img{
108  width:32%;
109  height:32%;
110}
111.tape{
112  position:relative;
113  bottom:30px;
114  left:30px;
115}
116.memo-title{
117margin-left:33%;
118margin-right:25%;
119
120font-size:28px;
121}
122
123.note{
124        width:30%;
125        height:44%;
126        float:right;
127        position: relative;
128        bottom:48%;
129        right:15%;
130        background-color: #ffffe7;
131        background-image:
132        linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
133        background-size: 100% 1.5em;
134        line-height:1.5em;
135        max-width: 100%;
136        font-size:22px;
137}
138
139 /*PC表示の時は、メモを傾ける*/
140    .note{
141          -moz-transform: rotate(-4deg);
142          -webkit-transform: rotate(-4deg);
143        }
144
145
146    .in{
147      padding-bottom: 20px;
148      font-size: 28px;
149      margin-top: 5px;
150
151    }
152
153
154    .letters{
155      padding-top:10px;
156      padding-left:20px;
157      padding-right:20px;
158      font-size:26px;
159      line-height:130%;
160      text-align: center;
161    }
162
163    .tab-change{
164
165      /*max-width: 100%;*/
166      height:auto;
167      margin-right:27%;
168      margin-left:27%;
169      margin-bottom:15%; 
170      margin-top:10%;    
171
172    }
173    
174    /*メニューの切り替えタブ*/
175
176    .tab-change a{
177      border-radius: 7px 7px 0 0;
178      display:inline-block;
179      line-height: 38px;
180      text-align: center;
181      background-color:white ;
182      color: black;
183      margin-left:auto;
184      margin-right:6%;
185      font-size:20px;
186      float:right;
187      text-decoration: none;
188      padding: 0 32px;
189
190    }
191
192    /*マウスをメニュータブに乗せた時、透過させる*/
193    .tab-change a:hover{
194      opacity:0.6;
195    }
196
197    .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
198    .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
199    .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
200
201
202
203    .content {
204      height: 320px; 
205      display: none;
206
207
208
209    }
210
211   .content:target {
212      display: block;
213    }  
214    
215    
216    
217  
218    
219    .Week-title{
220     border-bottom:3px solid #23c1ea;
221     width:17%;
222     padding-top:8%;
223     margin-left:10%;
224     font-size:25px;
225      margin-top:20%;
226     text-align: center;
227
228
229    }
230
231    .Day-title{
232     margin-left:10%;
233     border-bottom:3px solid #23c1ea;
234     width:24%;
235     padding-top:8%;
236     font-size:25px;
237     margin-top:20%;
238    text-align: center;
239
240    }
241/*表のレイアウト*/
242
243     table {
244       border:1px solid #000;
245       margin-left:0;
246       margin-right:auto;
247       background-color: white;
248       width:100%;
249       height:100%;
250       font-size: 25px;
251    }
252
253
254
255    
256    .day {
257      text-align: center;
258      font-size: 22px;
259      margin-top:auto;
260      margin-left:10%;
261      margin-right:10%;
262
263           }
264
265
266    .day img {
267    width:   200px;
268           }
269
270    .day tr td{
271    border:1px solid black;
272
273    }
274
275    .week{
276      text-align: center;
277      font-size: 22px;
278      margin-top: auto;
279      margin-left:10%;
280      margin-right:10%;
281
282    }
283
284    .week tr td{
285      border:1px solid black;
286    }
287    
288    .week img {
289      width:200px;
290
291    }
292
293
294    .box:after {
295     content: ' ';
296     clear: both;
297     display: block;
298           }
299
300     .base {
301     position: relative; 
302           }
303    
304    .low-frequency {
305     position: absolute;
306     left:-8%;
307       
308  
309  
310    } 
311
312    .low-frequency2{
313      position: absolute;
314      left:-8%;
315    
316
317    }
318    .decibel{
319
320      margin-top:0%;
321      padding-top:8%;
322       
323
324   
325    }
326    
327.out{
328    position:relative;
329        
330    }    
331
332.in{
333 position:absolute;    
334        
335        
336    }    
337    
338#explain-1{
339 
340  margin-left:47%;
341  font-size:22px;
342  margin-top:10%;
343  padding:0%;         
344        
345    }
346  
347    
348/*#explain-1の直前に画像を表示させる*/
349#explain-1::before{
350  content: url(symbol-2.png);
351  position: relative;
352  top: 0.8em;
353  margin-right: 0.5em;
354
355    
356    } 
357    
358#explain-2{
359  margin-left:47%;
360  font-size:22px;
361  margin-top:17%;
362  
363    
364    }  
365    
366    
367    
368/*#explain-2の直前に画像を表示させる*/    
369#explain-2::before{
370  content: url(symbol-1.png);
371  position: relative;
372  top: 0.8em;
373  margin-right: 0.5em;
374
375    
376    } 
377#explain-3{
378    
379     padding-top:10%;
380     font-size:22px;
381     padding-right:55%; 
382     margin-left:13%;
383 
384        
385    }
386    
387     
388        
389.small-1{
390
391 padding-right:55%; 
392 margin-left:13%; 
393 padding-top:0%;    
394 margin-top:23%;    
395    
396        
397    }    
398  
399    
400.small-2{
401    
402 margin-left:16%;    
403        
404    }    
405
406.explain{
407  margin-right:5%;
408  margin-left:10%;
409  font-size:22px;
410
411
412}
413
414.frequency-levels img{
415  width: 40%;
416  height:40%;
417  margin-top:10%;
418  margin-left:5%;    
419
420   
421     
422}
423
424.decibel-levels img{
425  width: 32%;
426  height:32%;
427  margin-top:3%;
428  margin-right:50%;
429  margin-left:10%;  
430  padding:0%; 
431  margin-bottom:5%;    
432
433    
434}
435
436
437.howtosee-title{
438  border-bottom:3px solid #23c1ea;
439  width:14%;
440  text-align: center;
441  font-size:26px;
442  padding-top:10%;
443  margin-left:10%;
444 }
445
446
447
448.howtosee-title2{
449     border-bottom:3px solid #23c1ea;
450     width:12%;
451     font-size:26px; 
452     text-align: center;
453     padding-top:10%;
454     margin-left:10%;
455
456}
457
458.howtosee-title3{
459      border-bottom:3px solid #23c1ea;
460      width:17%;
461      font-size:26px;
462      text-align: center;
463      margin-left:10%;
464      margin-top:10%;   
465    
466
467}
468
469    
470
471    #howtosee{
472        display:none;
473    }
474  
475/*hideクラスをつけた、土曜日と日曜日の音情報は、非表示にしておく*/
476
477    
478
479
480    
481    .hide{
482  display: none;
483}
484    /*
485
486    .--- フッター --- */
487   /* .footer,
488    .push {
489      height: 300px;
490    } */
491
492    .footer{
493        width: 88%;
494        height: 200px;
495        padding: 30px 6%;
496        background-color: #ffffff; 
497        position: absolute; 
498        top: 450%;
499        
500
501    
502    
503
504    }
505    .footer img{
506        width: 180px;
507        margin: 0px;
508        padding: 0px;
509        float: none;
510    }
511    .copyright{
512        font-size: 14px;
513        color: #000000;
514    }
515    .footer li{
516        list-style: none;
517    }
518    .footerB,.footerC,.footerD,.footerA{
519        width: 25%;
520        height: 200px;
521        margin: 0px;
522        padding: 0px;
523        float: left;
524    }
525    .footerB p,.footerC p,.footerD p{
526        font-size: 17px;
527    }
528    .footerB a,.footerC a,.footerD a{
529        font-size: 13px;
530    }
531
532    .footer a:link { color:#3d9ec7; text-decoration:none }
533    .footer a:visited { color:#3d9ec7; text-decoration:none }
534    .footer a:hover { color:#3d9ec7; text-decoration:none }
535    .footer a:active { color:#3d9ec7; text-decoration:none }
536
537}
538
539
540

m.ts10806

2017/07/10 00:12

現象が確認されたブラウザとバージョンを追記願います。

miramikan

2017/07/10 06:02

追記致しました！よろしくお願いいたします！

miramikan

2017/07/10 06:34

コードが入りきらなかったので、HTMLだけ別に投稿させていただきました。https://teratail.com/questions/83617?modal=q-comp

m.ts10806

2017/07/10 06:54

ここでは埋もれてしまうので関連質問へのリンクも質問本文に追記してください。

m.ts10806

2017/07/10 06:56

現象が再現しないように思います。画面キャプチャお願いできますか？こちらが文章で理解したものと違うかもしれませんし。

miramikan

2017/07/10 07:17

画像を追加しました。よろしくお願いします。

m.ts10806

2017/07/10 07:22 編集

Chromeで全く同じバージョンですが再現しませんね・・・。IE11でも再現しませんでした。うーん。。。画像自体はペイントで適当に作った画像でコピーして名前かえてるだけなので、本当に全く同じ状態かというとそうではないのですが＾＾；

miramikan

2017/07/10 07:30

どうしてでしょうか、、何度も試していただいてありがとうございます！申し訳ないです。再度コードをCSSとHTMLのコードを更新したのですが、ダメでしょうか、

行動規範の内容に同意します

回答1件

ベストアンサー

こちらの環境ではそのような挙動が再現できませんでした。一度、キャッシュの消去をしてみてはいかがでしょうか？また、`id="today"`が複数箇所にありますが、文法違反なので、直したほうが良いでしょう。
文字数の関係でこちらのコードは省略しました。
追記

問題が再現しません。以下のコードを実行してみてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>###</title>
7    <link rel="icon" href="icon.jpg">
8    <style type="text/css">
9        @media (min-width: 481px) {
10            /*  メイン */
11            .main {
12                width: 100%;
13                height: 1000px;
14                padding: 100px 0px;
15                margin: 0px;
16            }
17
18            .tab-change {
19                height: auto;
20                margin-right: 27%;
21                margin-left: 27%;
22                margin-bottom: 15%;
23                margin-top: 10%;
24            }
25
26            /*メニューの切り替えタブ*/
27            .tab-change a {
28                border-radius: 7px 7px 0 0;
29                display: inline-block;
30                line-height: 38px;
31                text-align: center;
32                background-color: white;
33                color: black;
34                margin-left: auto;
35                margin-right: 6%;
36                font-size: 20px;
37                float: right;
38                text-decoration: none;
39                padding: 0 32px;
40            }
41
42            /*マウスをメニュータブに乗せた時、透過させる*/
43            .tab-change a:hover {
44                opacity: 0.6;
45            }
46
47            .tab-change a:nth-child(2) {
48                border-top: 6px solid #23c1ea;
49            }
50
51            .tab-change a:nth-child(1) {
52                border-top: 6px solid #23c1ea;
53            }
54
55            .tab-change a:nth-child(3) {
56                border-top: 6px solid #23c1ea;
57            }
58
59            .content {
60                height: 320px;
61                display: none;
62            }
63
64            .content:target {
65                display: block;
66            }
67
68            /*表のレイアウト*/
69            table {
70                border: 1px solid #000;
71                margin-left: 0;
72                margin-right: auto;
73                background-color: white;
74                width: 100%;
75                height: 100%;
76                font-size: 25px;
77            }
78
79            .day {
80                text-align: center;
81                font-size: 22px;
82                margin-top: auto;
83                margin-left: 10%;
84                margin-right: 10%;
85            }
86
87            .day img {
88                width: 200px;
89            }
90
91            .day tr td {
92                border: 1px solid black;
93            }
94
95            .week {
96                text-align: center;
97                font-size: 22px;
98                margin-top: auto;
99                margin-left: 10%;
100                margin-right: 10%;
101            }
102
103            .week tr td {
104                border: 1px solid black;
105            }
106
107            .week img {
108                width: 200px;
109            }
110
111            .box:after {
112                content: ' ';
113                clear: both;
114                display: block;
115            }
116
117            .base {
118                position: relative;
119            }
120
121            .low-frequency {
122                position: absolute;
123                left: -8%;
124            }
125
126            .low-frequency2 {
127                position: absolute;
128                left: -8%;
129            }
130
131            .decibel {
132                margin-top: 0%;
133                padding-top: 8%;
134            }
135
136            .out {
137                position: relative;
138            }
139
140            .in {
141                position: absolute;
142            }
143
144            #explain-1 {
145                margin-left: 47%;
146                font-size: 22px;
147                margin-top: 10%;
148                padding: 0%;
149            }
150
151            /*#explain-1の直前に画像を表示させる*/
152            #explain-1::before {
153                content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-2.png);
154                position: relative;
155                top: 0.8em;
156                margin-right: 0.5em;
157            }
158
159            #explain-2 {
160                margin-left: 47%;
161                font-size: 22px;
162                margin-top: 17%;
163            }
164
165            /*#explain-2の直前に画像を表示させる*/
166            #explain-2::before {
167                content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-1.png);
168                position: relative;
169                top: 0.8em;
170                margin-right: 0.5em;
171            }
172
173            #explain-3 {
174                padding-top: 10%;
175                font-size: 22px;
176                padding-right: 55%;
177                margin-left: 13%;
178            }
179
180            .small-1 {
181                padding-right: 55%;
182                margin-left: 13%;
183                padding-top: 0%;
184                margin-top: 23%;
185            }
186
187            .small-2 {
188                margin-left: 16%;
189            }
190
191            .explain {
192                margin-right: 5%;
193                margin-left: 10%;
194                font-size: 22px;
195            }
196
197            .frequency-levels img {
198                width: 40%;
199                height: 40%;
200                margin-top: -10%;
201                margin-left: 5%;
202            }
203
204            .decibel-levels img {
205                width: 32%;
206                height: 32%;
207                margin-top: 3%;
208                margin-right: 50%;
209                margin-left: 10%;
210                padding: 0%;
211                margin-bottom: 5%;
212            }
213
214            .howtosee-title {
215                border-bottom: 3px solid #23c1ea;
216                width: 14%;
217                text-align: center;
218                font-size: 26px;
219                padding-top: 10%;
220                margin-left: 10%;
221            }
222
223            .howtosee-title2 {
224                border-bottom: 3px solid #23c1ea;
225                width: 12%;
226                font-size: 26px;
227                text-align: center;
228                padding-top: 10%;
229                margin-left: 10%;
230            }
231
232            .howtosee-title3 {
233                border-bottom: 3px solid #23c1ea;
234                width: 17%;
235                font-size: 26px;
236                text-align: center;
237                margin-left: 10%;
238                margin-top: 10%;
239            }
240
241            /*hideクラスをつけた、土曜日と日曜日情報は、非表示にしておく*/
242            .hide {
243                display: none;
244            }
245        }
246    </style>
247</head>
248<body>
249<!---------- ヘッダー --------->
250<div class="header"></div>
251<div class="main">
252    <p class="photo-title">###</p>
253    <div class="box">
254        <div class="whole-photo">
255            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.png" alt="">
256        </div>
257    </div>
258    <div class="note" id="note">
259        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=green.png" class="tape"/>
260
261        <p class="memo-title">〜メモ〜</p>
262        <div class="letters">
263            <p>###
264            </p>
265        </div>
266    </div>
267    <div>
268        <div>
269            <nav class="tab-change">
270                <a href='#howtosee'>見かた</a>
271                <a href='#this-week'>一週間</a>
272                <a href='#today'>今日</a>
273            </nav>
274        </div>
275        <div id='today' class='content'>
276            <p class="Day-title">♪<span id="view_today"></span>の情報</p>
277            <div class="day">
278                テキスト1
279                <table border="1" rules="cols">
280                </table>
281            </div>
282        </div>
283        <div id='this-week' class='content'>
284            <p class="Week-title">先週</p>
285            <div class="week">
286                テキスト2
287                <table border="1" rules="cols">
288
289                </table>
290            </div>
291        </div>
292        <div id='howtosee' class='content'>
293            <p class="howtosee-title">見方</p>
294            <div class="out">
295                <p class="in" id="explain-1">###</p>
296            </div>
297            <div class="frequency-levels">
298                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png">
299            </div>
300            <p class="small-1">####</p>
301            <div class="out">
302                <p class="in" id="explain-2">#####</p>
303            </div>
304            <div class="decibel-levels">
305                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png">
306            </div>
307            <p id="explain-3">###</p>
308            <p class="small-2">###</p>
309            <p class="howtosee-title2">111</p>
310            <!-- 終了タグが不完全だったので修正 -->
311            <p class="explain">111</p>
312            <!-- 開始タグが不完全だったので修正 -->
313            <p class="explain">111</p>
314            <p class="howtosee-title3">222</p>
315            <p class="explain">222</p>
316        </div>
317    </div>
318    <div class="push"></div>
319</div>
320<!---------- フッター --------->
321<div class="footer" id="footer"></div>
322</body>
323</html>