javaScriptを指定したら、aタグのリンクに飛べなくなってしまいました????
ページ内idへ#で移動は可能なのですが、
HTMLファイル間のリンクが機能しません????
完全に詰まりましたので、どなたかご意見ください!!!????
HTML
1<body id="body"> 2 3 <header> 4 5 <div class="mobile"> 6 <nav id="nav"> 7 <div class="hum"> 8 <div class="title"> 9 <p>店名</p> 10 </div> 11 <img id="open-btn" src="mobile-images/hum-menu.jpg" alt=""> 12 </div> 13 </nav> 14 15 <nav id="nav-active"> 16 <div class="hum-active"> 17 <img id="close-btn" src="mobile-images/hum-active.jpg" alt=""> 18 19 <img class="hum-logo" src="mobile-images/hum-logo.png" alt=""> 20 21 <ul> 22 <li><a id="nav-btn1" href="#body">ホーム</a></li> 23 <li><a id="nav-btn2" href="menu.html">お品書き</a></li> 24 <li><a id="nav-btn3" href="interior.html">店内</a></li> 25 <li><a id="nav-btn4" href="#about">店舗情報</a></li> 26 </ul> 27 28 <p>ご予約・お問い合わせ</p> 29 <p class="call-number">0***-**-****</p> 30 </div> 31 </nav> 32 33 34 35 <div class="top-image"> 36 <!--<div class="top-logo"> 37 <img class="mobile-logo" src="mobile-images/mobile-logo.png" alt=""> 38 </div>--> 39 </div> 40 </div> 41 </header> 42</body>
scss
1 body{ 2 margin: 0; 3 width: 100%; 4 //background-image: url(../mobile-images/mobile-top-back.jpg); 5 6 header{ 7 background-image: url(../mobile-images/mobile-top-back.jpg); 8 background-size: 346px 443px; 9 background-repeat: repeat-x; 10 11 #nav{ 12 //display: none; 13 width: 100%; 14 height: 65px; 15 position: fixed; 16 // position: absolute; 17 z-index: 2; 18 // top: 0; 19 // transform: translate(100%, -50%); 20 // transition: .5s; 21 background-image: url(../mobile-images/mobile-header.jpg); 22 box-shadow: 0px 3px 6px rgba($color: #4A3A2A, $alpha: 1); 23 24 .hum{ 25 //display: none; 26 display: flex; 27 justify-content: space-between; 28 align-items: center; 29 line-height: 100%; 30 31 32 .title{ 33 @include font(20px); 34 margin: 0 auto; 35 } 36 37 img{ 38 width: 65px; 39 } 40 } 41 } 42 43 #nav.passive{ 44 //display: none; 45 transform: translate(-100%); 46 transition: .5s; 47 } 48 49 50 51 #nav-active{ 52 //display: none; 53 width: 100%; 54 //height: 100vh; 55 position: fixed; 56 // position: absolute; 57 z-index: 10; 58 // top: 0; 59 transform: translate(100%, -50%); 60 transition: .5s; 61 62 63 64 .hum-active{ 65 height: 100vh; 66 //vh→画面のサイズに合わせる 67 background-color: rgba($color: #2E2E2E, $alpha: 0.8); 68 69 #close-btn{ 70 width: 65px; 71 position: absolute; 72 top: 0; 73 right: 0; 74 } 75 76 .hum-logo{ 77 display: block; 78 width: 279px; 79 margin: 0 auto; 80 padding-top: 15%; 81 } 82 83 ul{ 84 list-style: none; 85 @include font(24px); 86 letter-spacing: 00.05em; 87 padding: 0; 88 text-align: center; 89 90 li{ 91 padding-bottom: 15%; 92 93 a{ 94 text-decoration: none; 95 color: white 96 } 97 } 98 } 99 100 p{ 101 @include font(22px); 102 color: white; 103 text-align: center; 104 margin: 0; 105 } 106 107 .call-number{ 108 @include white(Hiragino Mincho ProN); 109 font-size: 34px; 110 } 111 } 112 } 113 114 //詳細度の関係上、classはidに負ける 115 #nav-active.active{ 116 transform: translateX(0); 117 //display: none; 118 } 119 120 121 .top-image{ 122 margin: 0 auto; 123 max-width: 666px; //追加 124 width: 100%; //修正 125 height: 443px; 126 background-image: url(../mobile-images/mobile-index-top5.jpg); 127 background-repeat: no-repeat; 128 background-size: 666px; 129 background-position: top center; //追加 130 position: relative; 131 z-index: 1; 132 } 133 } 134 }
javascript
1const open_btn = document.getElementById('open-btn'); 2const close_btn = document.getElementById('close-btn'); 3const nav_btn1 = document.getElementById('nav-btn1'); 4const nav_btn2 = document.getElementById('nav-btn2'); 5const nav_btn3 = document.getElementById('nav-btn3'); 6const nav_btn4 = document.getElementById('nav-btn4'); 7 8 9open_btn.addEventListener('click', e => { 10 e.preventDefault() 11 document.getElementById('nav').classList.add('passive') 12 document.getElementById("nav-active").classList.add("active") 13}); 14 15close_btn.addEventListener('click', e => { 16 e.preventDefault() 17 document.getElementById('nav').classList.remove('passive') 18 document.getElementById('nav-active').classList.remove('active') 19}); 20 21 22nav_btn1.addEventListener('click', e => { 23 e.preventDefault() 24 document.getElementById('nav').classList.remove('passive') 25 document.getElementById('nav-active').classList.remove('active') 26}); 27 28nav_btn2.addEventListener('click', e => { 29 e.preventDefault() 30 document.getElementById('nav').classList.remove('passive') 31 document.getElementById('nav-active').classList.remove('active') 32}); 33 34nav_btn3.addEventListener('click', e => { 35 e.preventDefault() 36 document.getElementById('nav').classList.remove('passive') 37 document.getElementById('nav-active').classList.remove('active') 38}); 39 40nav_btn4.addEventListener('click', e => { 41 e.preventDefault() 42 document.getElementById('nav').classList.remove('passive') 43 document.getElementById('nav-active').classList.remove('active') 44});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/19 09:34