aタグが一番上しか効かない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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でやっています。

kyoya0819

2020/03/05 01:25

stlesheet3.cssをご提示ください。

arrow9854

2020/03/06 19:02

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

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

回答1件

<a href="#">というのは、同じページ内の上部に飛ぶという指定です。何かしらの方法で別に動作を設定しない限り、ページ遷移という意味にはならないです。

投稿2020/02/25 05:31

maisumakun

総合スコア145183

arrow9854

2020/02/25 05:36

回答ありがとうございます。質問の仕方が悪かったと思います。 navタグのulタグのliタグの各h1タグのリンク先という意味です。何卒お願いします。

maisumakun

2020/02/25 05:38

えっと、その「リンク先」の指定が不適当なのではないか、という趣旨の回答です。

KoTT

2020/02/25 05:48 編集

単純に<h1><a href="" class="text-dark">ホーム</a></h1> のhref="" ←ここのリンク先がないだけではないでしょうか、、、。いま表示しているページをリロードしたいならhref="#"といれればよいかと思います。

arrow9854

2020/02/27 07:29

上のソースコードの状態で<h1><a href="page.html" class="text-dark">ページ</a></h1>が動かないという意味です。page.htmlのファイルの場所は上のソースコードと同じ階層なので、書き方はあっていると思うのですが。。。試したことで書いたことをやったときはもちろん、hrefの中に上のソースコードを記述して書きました。

maisumakun

2020/02/27 07:44

> 試したことで書いたことをやったときはもちろん、hrefの中に上のソースコードを記述して書きました。それならそうと分かるような書き方にしてほしかったです。JavaScriptで操作するなどでリンクは行わない場合、実際に「href="#"」と書くこともなくはないです。ソースコードを見返していて気になったのですが、javascript4.jsの中身はどのようなものでしょうか？

arrow9854

2020/02/27 07:50

細く記述していなくて申し訳ございません。 javascript4.jsは初めに使用していたのですが、後々必要ないことがわかり、今は全てコメントアウトして、全く使われていない状態です。

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