JavaScript - 現在のページのナビゲーション リンクを正しく強調表示するにはどうすればよいですか?

上記のウェブサイトのナビゲーションと同様に、リンクをクリックするとラベルが強調表示され、他のページをクリックすると、対応するページにジャンプし、現在のページに対応するナビゲーションラベルも表示されます。 Gaoliang さん、全体的なデザイン計画は何ですか?優れたエレガントなソリューションとは何でしょうか?答えを求めてください。
私が個人的に考えた解決策は次のとおりです。
1. ウィンドウの読み込み時にこれらのタグの URL をトラバースし、それらが現在のページの Web ページ URL と同じである場合は、それらを強調表示します。
2. ナビゲーション インデックスを保存するために Cookie を使用します。現在のクリックのインデックス値を読み取り、そのインデックス値でマークされたラベルを強調表示します。

これら 2 つの方法は少し信頼性に欠けているような気がするので、より良いアイデアを探しています。

返信内容:

上記のウェブサイトのナビゲーションと同様に、リンクをクリックするとラベルが強調表示され、他のページをクリックすると、対応するページにジャンプし、現在のページに対応するナビゲーションラベルも表示されます。 Gaoliang さん、全体的なデザイン計画は何ですか?優れたエレガントなソリューションとは何でしょうか?答えを求めてください。
私が個人的に考えた解決策は次のとおりです。 1. ウィンドウの読み込み時にこれらのタグの URL をトラバースし、それらが現在のページの Web URL と同じである場合は、それらを強調表示します。 2. ナビゲーション インデックスを保存するために Cookie を使用します。現在のクリックのインデックス値を読み取り、そのインデックス値でマークされたラベルを強調表示します。
これら 2 つの方法は少し信頼性に欠けているような気がするので、より良いアイデアを探しています。

JavaScript a要素の

プロパティがページURLと同じであることで判断可能

などの各要素にカスタム データ属性を追加し、その中に通常のマッチングを入れることもできます

JSFiddle: https://jsfiddle.net/bd4g5f2h/href

これは必要ないと思います。Web ページは 3 ～ 5 つしかありません。強調表示されたクラスを作成します。次に、各ページに強調表示されたナビゲーションを設定するだけです。テンプレート エンジンを使用している場合。このステップは、テンプレート エンジンを使用して実行できます。シングルページのアプリケーションを使用している場合は、この場合は js の使用のみを検討するか、#data-pattern 以降の内容を判断してください。