11

これが本当にばかげた質問のように聞こえる場合は申し訳ありませんが、リンク先のページにいるときにリンクの色を変更する必要があります.

たとえば、StackOverflow の「質問」ページにいる場合、上部のリンクの色が変わります。これどうやってやるの？

4

7 に答える 7

6

それは本当にあなたのページがどのように構築されているかに依存します. 通常、CSS を使用してこれを行い、リンクに「アクティブ」と呼ばれる ID を割り当てます...

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

...そしてCSSで...

a#active { color: yellow; }

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

于 2008-10-08T00:02:57.757 に答える
5

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

たとえば、StackOverflow は、class="youarehere"既に表示されているページを指している場合にリンクをレンダリングします。

于 2008-10-07T23:58:18.250 に答える
3

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

私が Django で構築しているスタック オーバーフロー クローンでは、次のようにしています。

<!-- 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; }
于 2008-10-08T00:04:56.117 に答える
2

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

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

ここに長い説明があります

于 2008-10-08T00:00:35.750 に答える
2

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

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}
于 2008-10-08T00:11:32.310 に答える
0

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

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

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

于 2008-10-08T00:08:54.063 に答える
-2

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

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

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

于 2008-10-08T00:01:27.387 に答える