JS ハッシュを使用してシングルページ Web アプリケーションを作成する方法の詳細な説明

この記事では、JS ハッシュを使用して単一ページの Web アプリケーションを作成する方法の詳細な説明を主に紹介します。必要な友人に参考にしてください。

この記事は主に、JS ハッシュを使用して単一ページの Web アプリケーションを作成することに関する関連コンテンツを紹介し、みんなの参照と学習のために共有するためのものです。以下では多くを説明しません。詳しい紹介。

1. ハッシュとは

ここで説明するハッシュ (ハッシュとも呼ばれます) は、JS の location オブジェクトのハッシュ属性を指し、URL 内でゼロまたはゼロの後に # を返します。複数の文字。通常、location.hash を通じてハッシュ値を取得または設定できます。もちろん、aタグのhref属性を設定することでハッシュ値を設定することもでき、ユーザーがaタグをクリックした際にページのハッシュ値を変更することができます。

例:

/** JS方式 **/
location.hash = 'hash'; //设置hash，该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash

/** HTML方式 **/
<a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

ハッシュをどのように変更しても、ページは更新されないことに注意してください。

2. ハッシュの使い方

1. アンカーリンクを設定する

アンカーリンクを設定する(つまり上記のHTMLメソッド)ことで、ページを指定した位置にスライドさせることができます。ページジャンプも例外ではなく、リンクをクリックした後の要素ID。

2. シングルページアプリケーションの制作を実現

ハッシュ値の変化に応じて対応する要素を表示・非表示にすることができ、ページ更新なしのシングルページ切り替えを実現します。

3. シングル ページ Web アプリケーションとは何ですか? シングル ページ Web アプリケーション (SPA) は、単一の Web ページをロードし、ユーザーが Web アプリケーションを操作できるようにします。ページを動的に更新します。

上記は百度百科事典によるシングルページアプリケーション(SPA)の説明ですが、ハッシュを使うと「ページ」の切り替えがとても便利になります。 4. ハッシュを使ったSPAの作り方

簡単に言うと、最初のページだけを表示し、ハッシュ値を変えることで別のページを表示し、前のページは非表示にするというものです。ここでは、最初にHTML構造を書きます単一ページの切り替え

<article class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-nav">
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

ここで、IE は oldURL と newURL の 2 つの属性と互換性がないため、この方法にはいくつかの制限があります。もちろん、より良い方法は、最初にハッシュ値を oldHash として変数に格納することです。その具体的な方法は次のとおりです。ブラウザ以下では、 className 属性を処理することで同じ効果を達成するのが最善です。ここでは詳しく説明しません。

以上がJS ハッシュを使用してシングルページ Web アプリケーションを作成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。