現在のページに基づいてリンクを強調表示するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

質問

これが本当に馬鹿げた質問のように聞こえるかもしれませんが、リンク先のページでリンクの色を変更する必要があります。

たとえば、＆quot;質問＆quot; stackoverflowのページでは、上部のリンクの色が変わります。これをどうやってやるの？

役に立ちましたか？

解決

これはサーバー側のものです-ページをレンダリングするとき、「current-page」のようなクラスを追加します;リンクへ。その後、他のリンクとは別にスタイルを設定できます。

たとえば、StackOverflowは、既に表示しているページを指すときに、 class =＆quot; youarehere＆quot; でリンクをレンダリングします。

他のヒント

それは、ページがどのように構築されているかによります。通常、CSSを使用してこれを行い、リンクに＆quot; active＆quot; ...というIDを割り当てます... 

<a id="active" href="thisPage.html">this page</a>

...そしてCSS ... 

a#active { color: yellow; }

明らかにこれはかなり単純な例ですが、一般的な考え方を示しています。

各ページのリンク自体を実際に変更することなく、これを行うことができます。

Djangoで構築しているStack Overflowクローンでは、これを実行しています：

<!-- base.html -->
...
<body class="{% block bodyclass %}{% endblock %}">
...
<div id="nav">
  <ul>
    <li id="nav-questions"><a href="{% url questions %}">Questions</a></li>
    <li id="nav-tags"><a href="{% url tags %}">Tags</a></li>
    <li id="nav-users"><a href="{% url users %}">Users</a></li>
    <li id="nav-badges"><a href="{% url badges %}">Badges</a></li>
    <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li>
  </ul>
</div>

次に、ページテンプレートのように bodyclass に入力します：

<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...

次に、次のCSSを使用して、ページごとに適切なリンクが強調表示されます。

body.questions #nav-questions a,
body.tags #nav-tags a,
body.users #nav-users a,
body.badges #nav-badges a,
body.ask-question #nav-ask-question a { background-color: #f90; }

各ページ（手動またはサーバー側）のbodyタグにクラスを設定します。次に、CSSでそのクラスを使用して現在のページを識別し、それに応じてアイテムのスタイルを更新します。

body.questions #questionsTab
{
    color: #f00;
}

これより長い説明

何らかの理由でサーバー側でこれを処理したくない場合は、これを試すことができます：

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}

サーバー側のコードは、現在のページのリンクにクラスを設定するだけで最も簡単ですが、これはJavaScriptを使用してクライアント側でも実行でき、特定のクラスのすべての要素に2番目のクラスを設定します。現在のページに一致するhref。

document.getElementsByTagName（）またはdocument.links []のいずれかを使用して、ナビゲーションリンクを示すクラス内のもののみを検索し、現在のURLと一致する場合は現在を示す2番目のクラスを設定できます。

URLは相対的ですが、document.URLは相対的ではありません。ただし、テーブル駆動のデザインからコンテンツを生成し、ユーザーが絶対URLまたは相対URLのいずれかを配置できる場合、サーバー側で相対vs絶対でこの同じ問題が発生することがあります。

このためにはサーバー上にコードが必要です。単純なアプローチは、現在のページのURLとリンク内のURLを比較することです。ただし、stackoverflowには多くの異なるURLがあり、すべて「質問」タブが強調表示されることを考慮してください。

より洗練されたバージョンでは、ページを変更するときにセッションに何かを入れることができます（堅牢ではありません）。各メニュー項目に関連するページ/ URLパターンのリストを保存します。またはページ自体のコード内で、強調表示するアイテムを決定する変数を設定します。

次に、ジョンミリキンが示唆しているように、クラスをリンクまたは「current-page」などの親要素の1つに配置します。色を制御します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top