前提・実現したいこと
ここに質問の内容を詳しく書いてください。
navタグ中に複数のaタグを用意し、他のページに飛べるようにしたいです。
しかし、aタグがかかっている部分をクリックしても一番上のものにしか反応せず、それ以外のものは反応しませんでした。
発生している問題・エラーメッセージ
一番上以外のaタグが効かない。
エラーメッセージ
なし
### 該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Write-書くためのテーマ</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="stlesheet3.css"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="javascript4.js"></script> </head> <body> <nav id="nav"> <ul class="nav_menu_ul"> <li> <h1><a href="" class="text-dark">ホーム</a></h1> <h2><a href="#" class="text-dark">→カスタマイズ</a></h2> </li> <li> <h1><a href="page.html" class="text-dark">ページ</a></h1> <h2><a href="#" class="text-dark">アイキャッチ画像なしのページ</a></h2> <h2><a href="#" class="text-dark">ページ(全幅テンプレート)</a></h2> </li> <li> <h1><a href="typegraph.html" class="text-dark">タイポグラフィー</a></h1> </li> <li> <h1><a href="#" class="text-dark">お問い合わせ</a></h1> </li> </ul> </nav> </body> </html>
display: block; position: fixed; right:1.75em; top:1.5em; width:1.75em; height: 1.5rem; } #nav_toggle i { display: block; width: 100%; height: 2px; background-color: #333; position: absolute; transition: transform 1s, opacity 1s; } #nav_toggle i:nth-child(1) { top: 0; } #nav_toggle i:nth-child(2) { top: 0; bottom: 0; margin: auto; } #nav_toggle i:nth-child(3) { bottom: 0; } #i1.show { transform: translateY(10px) rotate(-45deg); } #i2.show{ opacity: 0; } #i3.show { transform: translateY(-12px) rotate(45deg); } header>#nav{ position:fixed; top: 3rem; left: 0; right: 0; bottom: 0; padding: 100px; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s; } #nav.show { opacity: 1; visibility: visible; /* background-color: white; */ color:black; height:100%; padding:100px; transition: opacity 1s,visibility 1s; } #nav.show>ul>li{ color:black; } コード
試したこと
一番上のものと二番目のものを入れ替えたら、元々二番目にあったものは動きましたが、一番目にあったものは動かなくなりました。
補足情報
vscodeでやっています。