バニラの動的URL複数のリンクのJavaScript

-2

私は、この静的なアプリケーションのフッターセクションに約50のリンクを持っています。すべての50のhtmlファイルを作成せず、50のすべてのリンクに関連するデータを含む1つのhtmlファイルを作成し、クリックされたリンクに基づいて関連データを表示/非表示することは可能ですか？バニラの動的URL複数のリンクのJavaScript

シナリオ：ユーザーがデータを見

http://{url}/clicked-link-id/として

ユーザーがリンクをクリックすると、私は知っているクリックリンク-ID

に基づいてURLへの言及しましたAngularで簡単ですが、ui-routerやその他のフレームワーク/ libsを使用することはできません。

出典

2017-07-26 J. Parashar

Angularよりも識別子が大きいので、それを行うことができます：はい。 Angularは他の誰かがすでに書いたJavaScriptです。どの特定のビットで問題がありますか？クリックが発生したときに何かしますか？ページに表示される内容を変更しますか？コンテンツを表示するには？アドレスバーのURLを変更しますか？アドレスバーのURLが直接ロードされた場合に動作するようにサーバーサイドコードを記述するあなたの疑問は、それほど広すぎます。 – Quentin

Angularについて：クライアントでの使用はお勧めしません。質問が広すぎる：このシナリオはシンプルです>ユーザーがID「id」のリンクをクリックする> url/{id}>コンテンツに送信されたユーザーがそのIDに基づいて表示されます。尋ねると、ちょうど知っているすべてのリンクの複数のHTMLを記述し、hrefを追加するこの痛みはどこでも減らすことができますか？ –

「Angularについて：クライアントが使用することはお勧めしません」 - JSはそれができることを示すJSなので、私の主張はそれでした。 – Quentin

ここでは、URLを解析してJavaScriptを使用してclicked-link-idを取得する方法を示します。

clicked-link-idを取得すると、そのリンクに関連するコンテンツを含む要素を表示する関数を作成できます。

関連する情報を見つけるためにURLを分割する方法はたくさんあります。リンクを想定し、それを行うには一つの粗方法は、あなたが共有する構造を保持：

var url = document.location.href; 
var splitUrl = url.split("/"); 
var linkId = splitUrl[splitUrl.length - 1] || splitUrl[splitUrl.length - 2];

もここでは考慮される必要があり、他のものがあります。特定の構造を持つすべてのページリクエストをこのロジックを含むページにリダイレクトするために、おそらくウェブサーバー側の設定が必要です。それ以外の場合は、そのような要求すべてに対して404エラーが発生する可能性があります。

出典

2017-07-26 13:12:24 Jay

バニラの動的URL複数のリンクのJavaScript

答えて

関連する問題