2

シンプルなメニューがあります：

<ul id="menu">
    <li><a href="a.html">A</a></li>
    <li><a href="b.html">B</a></li>
    <li><a href="c.html">C</a></li>
</ul>

このメニューは 3 つのファイル ( ) に挿入されています{a-c}.html。a.htmlここで、CSS を使用して現在のメニュー項目 (A in 、B inなど)を強調表示したいと考えていますb.html。簡単な方法は、追加のクラスを挿入することです。

<ul id="menu">
    <li><a href="a.html">A</a></li>
    <li class="current"><a href="b.html">B</a></li>
    <li><a href="c.html">C</a></li>
</ul>

currentしかし、必要に応じてクラスを追加するようにジェネレータ コードに指示する簡単な方法はありません。にクラスを追加するようにジェネレーターに簡単に指示できますbody。

<body class="a">…&lt;/body> <!-- in a.html -->
<body class="b">…&lt;/body> <!-- in b.html -->
<body class="c">…&lt;/body> <!-- in c.html -->

そして、次のように現在のメニュー項目をターゲットにできます。

body.a li.a, body.b li.b, body.c li.c { /* highlight */ }

これは機能しますが、ハックのように感じます。もっと良いアイデアはありますか？

4

2 に答える 2

0

私が使用しているPHPベースのソリューションを使用して、エイリアン氏の回答をさらに拡張するには...

PHP を使用してナビゲーションを生成する場合、個々のページのページ タイトルに等しい変数を設定します。次に、疑似コードで言うifステートメントがあります...

home の変数 title が home の変数 nav-label と等しい場合、active のクラスを適用します。

したがって、基本的にすべてのページの最上部で、最初にタイトル変数を次のように設定します。

<?php $title = "Home"; ?>

次に、ナビゲーションが生成され、各 LI が次の構造で生成されます。

echo "<li class=\"$active\"><a href=\"$navPath\">$navLabel</a></li>";

次に、私の if ステートメント:

if ($title == $navLabel) {
    $active = 'active';
}
于 2013-04-23T12:48:02.107 に答える
0

すべての HTML ページのそれぞれのメニューに現在のクラスを追加できます。そのため、それぞれのメニューがターゲットになり、現在のページが表示されます。

ここに例があります：

//CSS

ul li{
    list-style-type:none;
    display:inline-block;
    vertical-align:top;       
}
li a{
    padding: 5px 10px;
}
.current{
    background: yellow;
}

//ページ a.html の HTML

<ul id="menu">
    <li><a href=a.html" class="current">A</a></li>
    <li><a href="b.html">B</a></li>
    <li><a href="c.html">C</a></li>
</ul>

//ページ b.html の HTML

<ul id="menu">
    <li><a href=a.html">A</a></li>
    <li><a href="b.html" class="current">B</a></li>
    <li><a href="c.html">C</a></li>
</ul>

//ページ c.html の HTML

<ul id="menu">
    <li><a href=a.html">A</a></li>
    <li><a href="b.html">B</a></li>
    <li><a href="c.html" class="current">C</a></li>
</ul>
于 2013-04-23T13:06:06.767 に答える