web-dev-qa-db-ja.com

同じページ内のアンカーが機能していませんか？

ページのHTML内の要素にリンクしようとしていますが、機能していません。理由はわかりません。

これが最初のリンクです：

<ul>
        <a href="#"><li>About Me</li></a>
        <a href="#"><li>Past</li></a>
        <a href="#Work"><li>Work</li></a>
        <a href="http://blog.tommaxwell.me"><li>Blog</li></a>
    </ul>

このリストのすべてのliは、ページのどこかにリンクされている必要があります（最後のものを除く）。

そして、このコードの一番上に私がリンクしようとしているところがあります：

<div id="Work">
    <a name="Work"><h2 id="work-title">Work</h2></a>
        <ul>
            <li>
                <h3>BrainDB</h3>
                <p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.Twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
            </li>

            <li>
                <h3 id>SummarizeIt</h3>
                <p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for summarizing content, like blog posts, into bit-sized chunks. </p>
            </li>

            <li>
                <h3>Freelance</h3>
                <p>I freelance from time to time. I work with personal clients, as well as through <a href="https://www.elance.com/s/tommaxwell/?utm_medium=social&utm_source=Twitter&utm_campaign=free&SiteTarget=share_profile&utm_term=3712117" id="elance">Elance</a>. I'm <a href="mailto:[email protected]" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

リンクするエリアはセクションタグを使用する必要がありますか？私はulを含むこれらのdivを複数持っています。

htmlhtml5anchor
9
Tom Maxwell

それは重要です。アンカーのhrefがページ相対（<base>で始まる）の場合、アンカーはすべてのページで機能するわけではなく、先頭にタグ#があります（ただしルートページ）。

たとえば、あなたはページにいます：

https://example.com/the/page/

このようなページのベースタグ：

<base href="https://example.com">

このページのコードにはアンカーがあります：

<a href="#anc">anchor</a>

Base-tagを使用すると、予想されたものではなく、 https://example.com/#anc に従います。

この問題を解決するには、次のいずれかを実行します。

  1. ドメイン相対アンカーを使用します。
  2. アンカークリックをJavaScriptでオーバーロードし、URLをドメイン相対にスワップします。
  3. ベースタグを削除します-それはしばしば使用されません。
6
Alexander Goncharov

これを試して。

<a href="#About"></a>

今、あなたはそれをどこか下にリンクしたいなら。

<a name="About">(Make Sure There Is Not Text here)</a>About Section.
3
SkNiaZi786

こんにちは、「a href」から呼び出されるには「a id」を使用する必要があります

次に例を示します。

<a href="#Works">My Works</a>

それは呼び出すでしょう：

<a id="Works">Works</a>

デモ

3
DV77

アンカーにはIDまたはWorkの名前が必要ですが、それを2回使用しています。

HTMLタグ-リンク

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>
3
lloan

このようにliタグ内でアンカータグを使用します。

<ul>
    <li><a href="#id">about</a></li>
    <li><a href="#work">work</a></li>
    <li><a href="#id">blog</a></li>
</ul>

このようなものとあなたのリンクIDは以下の通り

<div id="work">
</div>
2
jignesh kheni

私もこの問題を抱えていて（リンクを使用した同じページナビゲーション）、解決策は非常に簡単でした（理解するのは面倒でしたが）。これがお役に立てば幸いです-また、IE、Firefox、およびChrome=をチェックし、それが全面的に機能しました（2019年5月22日現在）。

リンクは次のようになります。

<a href="pagename.html##anchorname">Word as link you want people to click</a>

アンカーは次のようになります。

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
1
Brister Productions