Question

我有一个简单的菜单：

<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.html中的A，b.html中的B，依此类推）。简单的方法是插入一个额外的类：

<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">…</body> <!-- in a.html -->
<body class="b">…</body> <!-- in b.html -->
<body class="c">…</body> <!-- in c.html -->

然后我可以像这样定位当前的菜单项：

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

这很有效，但感觉就像是黑客。你有更好的主意吗？

Answer 1

使用基于PHP的解决方案进一步扩展Alien先生的答案......

如果使用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';
}

Answer 2

您可以为每个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>

如何使用CSS定位当前菜单项？

2 个答案: