アンカーリンクとハッシュattribute_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

アンカーリンクとハッシュattribute_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

この効果をよく目にしたことがあると思います。非常に長いページがあり、いくつかの部分に分かれています。目次内でクリックすると、ページ上の特定の位置を見つけることができます。

例: このようなディレクトリがあります。たとえば、「HTML」をクリックすると、「HTML」のページの場所に直接ジャンプします

これはアンカーリンクです（また、ブックマークリンクと呼ばれます) は、大規模で複雑なコンテンツを含む Web ページでよく使用されます。名前付きアンカーをクリックすると、ドキュメントだけでなく、ページ内の特定の段落をポイントすることもでき、便利なリンクとして使用できます。「正確なリンク」のためのツール。

長いページでは、アンカーポイントを使用してこのページ上の特定の位置を特定し、アンカーポイントリンクを使用します。使い方は非常に簡単で、コードデモは以下の通りです:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><a href="#5F">点击我，会锚点定位到某个地方</a></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <a name="5F">某个地方哈哈哈哈</href></body></html>

ログイン後にコピー

次に、非常に実践的なハッシュ属性のアンカーリンクについて説明します。

ウェブサイトを構築する過程で、このような問題に遭遇しました。概要ページはまだスタックしており、ニュースセクションはジョイナスセクションではありません。図に示すように:

この状況に直面して、私はハッシュ属性のアンカーリンクを使用します。まず、index.html の 4 つのナビゲーションリンクにハッシュ値を設定します。 about.html にジャンプするまで待ってから、var tab_hash=window.location.hash を使用して後続のハッシュ値を取得してから論理的判断を行います。

簡単に言うと、実際には通常のジャンプと同じですが、ジャンプ URL の後に追加の情報が追加され、ページがジャンプした後にその情報を削除して使用できる点が異なります。

皆さんと共有する小さな実用的な属性、ご多幸をお祈りします!

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。