1

A、B、C、D、E の 5 つのページがあるとします。また、横方向のメニューもあり、各項目の背景は薄い灰色になっています。

各メニュー項目には、中程度の灰色の背景を与える:hover がありますが、アクティブなページの背景を黒にしたいので、定義します

#black {
    background-color: #000;
}

ユーザーが B.php を使用している場合、B メニュー項目に #black ID を付けたいと思います。これを行う最善の方法は何ですか？

4

3 に答える 3

4

提案; あなたのスタイルが「何であるか」を定義するのではなく、あなたのスタイルが「何をするか」を定義してください。#black と呼ばずに、.current と呼んでください。

もう 1 つ注意すべき点は、ID は一意の要素 (#header、#footer、#main、#sidebar、#navbar など) を識別することです。1 つの要素に複数のクラスを関連付けることができますが、ID は 1 つしか持てないため、繰り返し可能なアイテムを最新として定義するには、クラスを使用する必要があります。繰り返しますが、その ID は一意の名前付けのために予約されています。

.current
{
    background-color: #000;
}

これをページに関連付けるには、どのページがオンになっているかを示す変数をページに設定し、if ブロックを使用するか、ケースを切り替えて、現在のページに関連する要素にスタイルを追加します。

（疑似コード、私のPHP構文は錆びています）

$current_page = "B"

// -- snip --

<ul>
    <li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
    <li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>

必要に応じて、リクエストのページ URL から $current_page を取得してみてください。

于 2009-01-10T06:12:06.827 に答える
3

プロジェクトに PHP を使用できる場合 (CMS を使用していないプロジェクト)、通常は PHP 配列を使用してメニューを作成します。配列からページを追加、移動、または削除するのは非常に簡単で、PHP にこれを実際のメニューとして出力させることで、同じコードを何度も書き直す必要がなくなります。

アクティブと見なされるページを指定するには、次のようなコードを使用できます。

$currentPage = "b.php";

意図的に完全なファイル名を使用していることに注意してください。その理由を簡単に説明します。

各メニュー項目には少なくとも 2 つの変数 (name、url) が必要なので、各エントリに対してメニューの配列内で配列を使用します。例：

$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));

さて、PHP を魔法のように機能させるために、foreach ループを使用して各項目を実行し、必要な方法で表示します。

foreach($menu as $num => $options){
  $s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
  echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}

この概念を拡張して、ターゲット、タイトル タグなどを含めることができます。

この方法の優れた点は、プロジェクトごとにそれほど多くのことを書く必要がないことです。すべてをコピーして貼り付け、$menu 配列の一部を変更し、必要に応じて (つまり、サブメニュー項目の場合) $currentPage を指定します。$currentPage が指定されていない場合、($_SERVER['PHP_SELF'] を介して) 現在のページが何であるかをチェックし、それに基づいてアクティブな状態にします。

私はそれを十分に説明し、あなたが使用するのに十分であることを願っています!

(小さな免責事項ですが、私は目覚めてこのコードをゼロから書きました。概念は機能しますが (私は何年も使用しています)、あちこちでタイプミスをした可能性があります。その場合はお詫びします!)

于 2009-01-10T06:56:31.947 に答える
2

<body>現在のページに関連する要素にクラスまたは ID を割り当てることができます。次に、これを使用して各ページのローカル ナビゲーションなどのスタイルを設定します。各ナビゲーション リスト項目に、リンクが指している対象に関連するクラスを与えます。

すなわち。

ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}

body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}
于 2009-01-10T06:11:20.523 に答える