質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,033

miramikan

score 22

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

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

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

@charset "UTF-8";

/*PC用*/

@media (min-width:481px){

body{

    background-color: #f9fbfe;
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",serif!important;
}
    /* --- ヘッダー --- */
    .header{
        position: fixed;
        width: 100%;
        height: 85px;
        margin: 0px;
        padding: 0px;
        background-color: #ffffff;
        z-index: 9999;
        top: 0px;
        left: 0px;
    }
    .header h1,img{
        width: 250px;
        margin: 0px 0px 0px 6%;
        float: left;
    }
    .header nav{
        padding-right: 6%;
    }
    .header li{
        width: 180px;
        padding: 0px;
        margin: 0px;
        font-size: 15px;
        color: #3d9ec7;
        list-style: none;
        text-align: center;
    }

    /*ページをクリックした後も、文字色を変えないでおく*/

    .header li :visited{
        color: #3d9ec7;
    }
    .header_item{
        display: inline;
        float: right;
    }

  /* ヘッダーのナビをPCの時は表示させる */
 .menu-pc{
   display:inline-block;
 }
/*スマホ用のハンバーガーボタンをPCの時は非表示にする*/
  #menu{
    display:none;
  }

 /*ハンバーガーボタンを開いた際の「元に戻る」という文を非表示にする*/   
 .return{
      display:none;
    }

/*  メイン */
    .main{
        width: 100%;
        height: 1000px;
        padding: 100px 0px;
        margin: 0px;

    }


@font-face {
      font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",serif!important";
      src: url("font.eot?") format('eot');
      src: url("font.eot?#iefix") format('embedded-opentype'),
           url("font.woff") format('woff'),
           url("font.ttf")  format('truetype');
    }

    img {
   max-width : 100% ;
   height : auto ;
   }



    .photo-title{
     font-size:25px;
     margin-left:150px;
     border-bottom:3px solid #23c1ea;
     width:375px;
     max-width: 100%;
     height: auto;
    }

    .whole-photo{
      margin-left:70px;
      margin-top: 50px;
      position:relative;

    }

.whole-photo img{
  width:32%;
  height:32%;
}
.tape{
  position:relative;
  bottom:30px;
  left:30px;
}
.memo-title{
margin-left:33%;
margin-right:25%;

font-size:28px;
}

.note{
        width:30%;
        height:44%;
        float:right;
        position: relative;
        bottom:48%;
        right:15%;
        background-color: #ffffe7;
        background-image:
        linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
        background-size: 100% 1.5em;
        line-height:1.5em;
        max-width: 100%;
        font-size:22px;
}

 /*PC表示の時は、メモを傾ける*/
    .note{
          -moz-transform: rotate(-4deg);
          -webkit-transform: rotate(-4deg);
        }


    .in{
      padding-bottom: 20px;
      font-size: 28px;
      margin-top: 5px;

    }


    .letters{
      padding-top:10px;
      padding-left:20px;
      padding-right:20px;
      font-size:26px;
      line-height:130%;
      text-align: center;
    }

    .tab-change{

      /*max-width: 100%;*/
      height:auto;
      margin-right:27%;
      margin-left:27%;
      margin-bottom:15%; 
      margin-top:10%;    

    }

    /*メニューの切り替えタブ*/

    .tab-change a{
      border-radius: 7px 7px 0 0;
      display:inline-block;
      line-height: 38px;
      text-align: center;
      background-color:white ;
      color: black;
      margin-left:auto;
      margin-right:6%;
      font-size:20px;
      float:right;
      text-decoration: none;
      padding: 0 32px;

    }

    /*マウスをメニュータブに乗せた時、透過させる*/
    .tab-change a:hover{
      opacity:0.6;
    }

    .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
    .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
    .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }



    .content {
      height: 320px; 
      display: none;



    }

   .content:target {
      display: block;
    }  





    .Week-title{
     border-bottom:3px solid #23c1ea;
     width:17%;
     padding-top:8%;
     margin-left:10%;
     font-size:25px;
      margin-top:20%;
     text-align: center;


    }

    .Day-title{
     margin-left:10%;
     border-bottom:3px solid #23c1ea;
     width:24%;
     padding-top:8%;
     font-size:25px;
     margin-top:20%;
    text-align: center;

    }
/*表のレイアウト*/

     table {
       border:1px solid #000;
       margin-left:0;
       margin-right:auto;
       background-color: white;
       width:100%;
       height:100%;
       font-size: 25px;
    }




    .day {
      text-align: center;
      font-size: 22px;
      margin-top:auto;
      margin-left:10%;
      margin-right:10%;

           }


    .day img {
    width:   200px;
           }

    .day tr td{
    border:1px solid black;

    }

    .week{
      text-align: center;
      font-size: 22px;
      margin-top: auto;
      margin-left:10%;
      margin-right:10%;

    }

    .week tr td{
      border:1px solid black;
    }

    .week img {
      width:200px;

    }


    .box:after {
     content: ' ';
     clear: both;
     display: block;
           }

     .base {
     position: relative; 
           }

    .low-frequency {
     position: absolute;
     left:-8%;



    } 

    .low-frequency2{
      position: absolute;
      left:-8%;


    }
    .decibel{

      margin-top:0%;
      padding-top:8%;



    }

.out{
    position:relative;

    }    

.in{
 position:absolute;    


    }    

#explain-1{

  margin-left:47%;
  font-size:22px;
  margin-top:10%;
  padding:0%;         

    }


/*#explain-1の直前に画像を表示させる*/
#explain-1::before{
  content: url(symbol-2.png);
  position: relative;
  top: 0.8em;
  margin-right: 0.5em;


    } 

#explain-2{
  margin-left:47%;
  font-size:22px;
  margin-top:17%;


    }  



/*#explain-2の直前に画像を表示させる*/    
#explain-2::before{
  content: url(symbol-1.png);
  position: relative;
  top: 0.8em;
  margin-right: 0.5em;


    } 
#explain-3{

     padding-top:10%;
     font-size:22px;
     padding-right:55%; 
     margin-left:13%;


    }



.small-1{

 padding-right:55%; 
 margin-left:13%; 
 padding-top:0%;    
 margin-top:23%;    


    }    


.small-2{

 margin-left:16%;    

    }    

.explain{
  margin-right:5%;
  margin-left:10%;
  font-size:22px;


}

.frequency-levels img{
  width: 40%;
  height:40%;
  margin-top:10%;
  margin-left:5%;    



}

.decibel-levels img{
  width: 32%;
  height:32%;
  margin-top:3%;
  margin-right:50%;
  margin-left:10%;  
  padding:0%; 
  margin-bottom:5%;    


}


.howtosee-title{
  border-bottom:3px solid #23c1ea;
  width:14%;
  text-align: center;
  font-size:26px;
  padding-top:10%;
  margin-left:10%;
 }



.howtosee-title2{
     border-bottom:3px solid #23c1ea;
     width:12%;
     font-size:26px; 
     text-align: center;
     padding-top:10%;
     margin-left:10%;

}

.howtosee-title3{
      border-bottom:3px solid #23c1ea;
      width:17%;
      font-size:26px;
      text-align: center;
      margin-left:10%;
      margin-top:10%;   


}



    #howtosee{
        display:none;
    }

/*hideクラスをつけた、土曜日と日曜日の音情報は、非表示にしておく*/





    .hide{
  display: none;
}
    /*

    .--- フッター --- */
   /* .footer,
    .push {
      height: 300px;
    } */

    .footer{
        width: 88%;
        height: 200px;
        padding: 30px 6%;
        background-color: #ffffff; 
        position: absolute; 
        top: 450%;





    }
    .footer img{
        width: 180px;
        margin: 0px;
        padding: 0px;
        float: none;
    }
    .copyright{
        font-size: 14px;
        color: #000000;
    }
    .footer li{
        list-style: none;
    }
    .footerB,.footerC,.footerD,.footerA{
        width: 25%;
        height: 200px;
        margin: 0px;
        padding: 0px;
        float: left;
    }
    .footerB p,.footerC p,.footerD p{
        font-size: 17px;
    }
    .footerB a,.footerC a,.footerD a{
        font-size: 13px;
    }

    .footer a:link { color:#3d9ec7; text-decoration:none }
    .footer a:visited { color:#3d9ec7; text-decoration:none }
    .footer a:hover { color:#3d9ec7; text-decoration:none }
    .footer a:active { color:#3d9ec7; text-decoration:none }

}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miramikan

    2017/07/10 16:17

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

    キャンセル

  • m.ts10806

    2017/07/10 16:21 編集

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

    キャンセル

  • miramikan

    2017/07/10 16:30

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

    キャンセル

回答 1

checkベストアンサー

+2

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

追記

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>###</title>
    <link rel="icon" href="icon.jpg">
    <style type="text/css">
        @media (min-width: 481px) {
            /*  メイン */
            .main {
                width: 100%;
                height: 1000px;
                padding: 100px 0px;
                margin: 0px;
            }

            .tab-change {
                height: auto;
                margin-right: 27%;
                margin-left: 27%;
                margin-bottom: 15%;
                margin-top: 10%;
            }

            /*メニューの切り替えタブ*/
            .tab-change a {
                border-radius: 7px 7px 0 0;
                display: inline-block;
                line-height: 38px;
                text-align: center;
                background-color: white;
                color: black;
                margin-left: auto;
                margin-right: 6%;
                font-size: 20px;
                float: right;
                text-decoration: none;
                padding: 0 32px;
            }

            /*マウスをメニュータブに乗せた時、透過させる*/
            .tab-change a:hover {
                opacity: 0.6;
            }

            .tab-change a:nth-child(2) {
                border-top: 6px solid #23c1ea;
            }

            .tab-change a:nth-child(1) {
                border-top: 6px solid #23c1ea;
            }

            .tab-change a:nth-child(3) {
                border-top: 6px solid #23c1ea;
            }

            .content {
                height: 320px;
                display: none;
            }

            .content:target {
                display: block;
            }

            /*表のレイアウト*/
            table {
                border: 1px solid #000;
                margin-left: 0;
                margin-right: auto;
                background-color: white;
                width: 100%;
                height: 100%;
                font-size: 25px;
            }

            .day {
                text-align: center;
                font-size: 22px;
                margin-top: auto;
                margin-left: 10%;
                margin-right: 10%;
            }

            .day img {
                width: 200px;
            }

            .day tr td {
                border: 1px solid black;
            }

            .week {
                text-align: center;
                font-size: 22px;
                margin-top: auto;
                margin-left: 10%;
                margin-right: 10%;
            }

            .week tr td {
                border: 1px solid black;
            }

            .week img {
                width: 200px;
            }

            .box:after {
                content: ' ';
                clear: both;
                display: block;
            }

            .base {
                position: relative;
            }

            .low-frequency {
                position: absolute;
                left: -8%;
            }

            .low-frequency2 {
                position: absolute;
                left: -8%;
            }

            .decibel {
                margin-top: 0%;
                padding-top: 8%;
            }

            .out {
                position: relative;
            }

            .in {
                position: absolute;
            }

            #explain-1 {
                margin-left: 47%;
                font-size: 22px;
                margin-top: 10%;
                padding: 0%;
            }

            /*#explain-1の直前に画像を表示させる*/
            #explain-1::before {
                content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-2.png);
                position: relative;
                top: 0.8em;
                margin-right: 0.5em;
            }

            #explain-2 {
                margin-left: 47%;
                font-size: 22px;
                margin-top: 17%;
            }

            /*#explain-2の直前に画像を表示させる*/
            #explain-2::before {
                content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-1.png);
                position: relative;
                top: 0.8em;
                margin-right: 0.5em;
            }

            #explain-3 {
                padding-top: 10%;
                font-size: 22px;
                padding-right: 55%;
                margin-left: 13%;
            }

            .small-1 {
                padding-right: 55%;
                margin-left: 13%;
                padding-top: 0%;
                margin-top: 23%;
            }

            .small-2 {
                margin-left: 16%;
            }

            .explain {
                margin-right: 5%;
                margin-left: 10%;
                font-size: 22px;
            }

            .frequency-levels img {
                width: 40%;
                height: 40%;
                margin-top: -10%;
                margin-left: 5%;
            }

            .decibel-levels img {
                width: 32%;
                height: 32%;
                margin-top: 3%;
                margin-right: 50%;
                margin-left: 10%;
                padding: 0%;
                margin-bottom: 5%;
            }

            .howtosee-title {
                border-bottom: 3px solid #23c1ea;
                width: 14%;
                text-align: center;
                font-size: 26px;
                padding-top: 10%;
                margin-left: 10%;
            }

            .howtosee-title2 {
                border-bottom: 3px solid #23c1ea;
                width: 12%;
                font-size: 26px;
                text-align: center;
                padding-top: 10%;
                margin-left: 10%;
            }

            .howtosee-title3 {
                border-bottom: 3px solid #23c1ea;
                width: 17%;
                font-size: 26px;
                text-align: center;
                margin-left: 10%;
                margin-top: 10%;
            }

            /*hideクラスをつけた、土曜日と日曜日情報は、非表示にしておく*/
            .hide {
                display: none;
            }
        }
    </style>
</head>
<body>
<!---------- ヘッダー --------->
<div class="header"></div>
<div class="main">
    <p class="photo-title">###</p>
    <div class="box">
        <div class="whole-photo">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.png" alt="">
        </div>
    </div>
    <div class="note" id="note">
        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=green.png" class="tape"/>

        <p class="memo-title">〜メモ〜</p>
        <div class="letters">
            <p>###
            </p>
        </div>
    </div>
    <div>
        <div>
            <nav class="tab-change">
                <a href='#howtosee'>見かた</a>
                <a href='#this-week'>一週間</a>
                <a href='#today'>今日</a>
            </nav>
        </div>
        <div id='today' class='content'>
            <p class="Day-title"><span id="view_today"></span>の情報</p>
            <div class="day">
                テキスト1
                <table border="1" rules="cols">
                </table>
            </div>
        </div>
        <div id='this-week' class='content'>
            <p class="Week-title">先週</p>
            <div class="week">
                テキスト2
                <table border="1" rules="cols">

                </table>
            </div>
        </div>
        <div id='howtosee' class='content'>
            <p class="howtosee-title">見方</p>
            <div class="out">
                <p class="in" id="explain-1">###</p>
            </div>
            <div class="frequency-levels">
                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png">
            </div>
            <p class="small-1">####</p>
            <div class="out">
                <p class="in" id="explain-2">#####</p>
            </div>
            <div class="decibel-levels">
                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png">
            </div>
            <p id="explain-3">###</p>
            <p class="small-2">###</p>
            <p class="howtosee-title2">111</p>
            <!-- 終了タグが不完全だったので修正 -->
            <p class="explain">111</p>
            <!-- 開始タグが不完全だったので修正 -->
            <p class="explain">111</p>
            <p class="howtosee-title3">222</p>
            <p class="explain">222</p>
        </div>
    </div>
    <div class="push"></div>
</div>
<!---------- フッター --------->
<div class="footer" id="footer"></div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/10 01:11

    アドバイスありがとうございます!!
    idの重複気づきませんでした!修正いたしました。
    キャッシュの削除を行ったのですが、まだ解消できませんでした汗
    コードを追加したので、もしお時間あれば、再度見ていただきたいです。
    よろしくお願い致します。

    キャンセル

  • 2017/07/10 01:22

    問題が再現しません。追記したコードを実行してみていただけませんか?また、どのような状況でその問題が起こるのかを教えてもらえると嬉しいです。

    キャンセル

  • 2017/07/10 15:10

    私も、追記していただいたコードを実行したところ、問題が見られませんでした。文字数の関係でかなりコードを省略していたのですが、その部分に問題があるのかもしれません。コードを追記したので、再度確認よろしくお願い致します。何度もお手数をおかけしてしまい、申し訳有りませんm(_ _)m

    キャンセル

  • 2017/07/10 15:33

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる