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>

此菜单被插入三个文件 ( {a-c}.html)。现在我想使用 CSS 来突出显示当前菜单项（A in a.html、 B inb.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

为了进一步扩展 Alien 先生的答案，我使用了一个基于 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 回答