web-dev-qa-db-ja.com

別のページのアンカーに移動します

あるページから別のページの特定のポイントに移動したいだけです

ホームページには4つのセクションがあります。

<section>
   <a name="section1"></a>
</section>

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

セクション2と4はすべてのページで機能するため、私のナビゲーションは次のようになります。

<nav>
      <ul>
        <li><a href="index.html#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="index.html#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

リンクは、インデックスページまたはインデックスページの目的のセクションに移動していません。

前もって感謝します。

今私が持っています

<section>
       <a name="section1"></a>
    </section>

    <section id="section2">

    </section>

    <section>
       <a name="section3"></a>
    </section>

    <section id="section4">

    </section>

そして私のナビゲーション：

<nav>
      <ul>
        <li><a href="#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

まだ動作していません

htmlhyperlinknavigationanchor
8
user1910388

ファイルを同じディレクトリに置いたことが確かですか？あなたが提供したコードをテストしましたが、動作しています。ただし、これを試すことができます（セクションにIDを与える別の方法）：

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

これを行った場合は、同じリンク方法を使用してください。

<a href="different-page.html#section1">Section One</a>
13
aaronang

「event.preventDefault（）;」という行のjavascriptコードを確認します

これをw3school bootstrapテンプレートで見つけました。このテンプレートには、ハッシュタグへのNiceスクロールを行うブロックの一部としてこのコマンドが含まれています。コメントアウトすると、リンクは正常に機能しました。

7
Mike Ursitti

Legacy Browser（IE8以下）でこの問題に直面していると思います。 firefox、chorm、IE9でテストしたためです。それはうまく機能しています。しかし、レガシーブラウザでは失敗しました。

そのためには、div idの代わりにアンカータグを使用する必要があります。

例：

<a name="section1"></a>
<section>section content goes here </section>

<a name="section2"></a>
<section>section content goes here </section>

<a name="section3"></a>
<section>section content goes here </section>

<a name="section4"></a>
<section>section content goes here </section>

これで、セクション要素に任意のクラス名を使用できます...

0
Rakesh Kumar

A-nameタグが必要です。 http://www.w3schools.com/tags/att_a_name.asp をご覧ください。

0
Teson