1

假设我有 5 页：A、B、C、D 和 E。我还有一个水平菜单，每个项目都有浅灰色背景。

每个菜单项都有一个：悬停，它给它一个中灰色背景，但我希望活动页面有一个黑色背景，所以我定义

#black {
    background-color: #000;
}

现在，当用户在 B.php 上时，我希望 B 菜单项带有#black id。这样做的最佳方法是什么？

4

3 回答 3

4

一条建议; 不要定义你的风格“是”什么，定义你的风格“做什么”。不要称它为#black，而是称它为.current。

另一件需要注意的是，ID 用于识别唯一元素（#header、#footer、#main、#sidebar、#navbar 等）。将可重复项定义为当前项应该使用一个类来完成，因为您可以将多个类与一个元素关联，但只有一个 ID。同样，该 ID 保留用于唯一命名。

.current
{
    background-color: #000;
}

要将其与页面相关联，您可以在页面上设置一个变量来指示其所在的页面，然后使用 if 块或 switch case 将样式添加到与当前页面相关的元素：

（伪代码，我的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";

请注意，我故意使用完整的文件名。我会简短地解释为什么。

由于每个菜单项至少需要两个变量（名称、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 。然后使用此样式设置每个页面的本地导航等。给每个导航列表项一个与链接指向的内容相关的类。

IE。

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 回答