0

我在所有页面中都有一个这样的菜单，并且想添加一个 CSS 类来根据页面突出显示选定的菜单。

哪种方法最简单？

<div id="menu">
   <a href="index.php" class="item-menu">Home</a>
   <a href="projects.php" class="item-menu">Projects</a>   
   <a href="contact.php" class="item-menu">Contact</a>            
</div>

菜单代码位于一个menu.php在所有页面中调用的文件中。我可以通过曲折的方式（使用 IF 或其他东西）实现我想要的，但我正在寻找一个简单的解决方案。

4

4 回答 4

5

这很脏但很容易：

<div id="menu">
   <a href="index.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'index.php' ) echo ' active';?>">Home</a>
   <a href="projects.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'projects.php' ) echo ' active';?>">Projects</a>   
   <a href="contact.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'contact.php' ) echo ' active';?>">Contact</a>            
</div>
于 2012-05-05T15:12:59.297 回答
1

这应该可以帮助您入门

<div id="menu">
    <a href="index.php" class="item-menu <?= $_SERVER['REDIRECT_URL'] == '/index.php' ? 'selected' : '' ?>">Home</a>
    <a href="projects.php <?= $_SERVER['REDIRECT_URL'] == '/projects.php' ? 'selected' : '' ?>" class="item-menu">Projects</a>   
    <a href="contact.php <?= $_SERVER['REDIRECT_URL'] == '/contact.php' ? 'selected' : '' ?>" class="item-menu">Contact</a>            
</div>
于 2012-05-05T15:12:14.983 回答
1

作为已经提出的解决方案的替代方案，您可以简单地向主<ul/>元素添加一个类，然后为每个组合设置 CSS：

<div id="menu" class="home">
   <a href="index.php" class="home item-menu">Home</a>
   <a href="projects.php" class="projects item-menu">Projects</a>   
   <a href="contact.php" class="contact item-menu">Contact</a>            
</div>​

#menu.home a.home,
#menu.projects a.projects,
#menu.contact a.contact {
    /* Active link CSS */
}​

然后，您只需要使用 PHP 来确定#menu. 这可以通过几种不同的方式完成，具体取决于您的应用程序的设置方式。如果您menu.php只是被包含在其他页面中，您可以将此类放在其他位置（例如<body/>元素上）并将以前的 CSS 调整为类似body.home #menu a.home, ....

查看一个工作示例 - http://jsfiddle.net/jaredhoyt/7TX4h/

于 2012-05-05T15:16:28.580 回答
0

根据您的决定获取元素并将类名添加到类属性中：

if ($res = $xpath->query(sprintf('//a[@href="%s"]', basename($_SERVER['SCRIPT_FILENAME'])))
{
    $res->item(0)->setAttribute('class', $res->item(0)->getAttribute('class') . ' active');
}

这假设您在 dom 元素中有菜单，并且您DOMXpath可以使用它 ( $xpath)。

于 2012-05-05T15:20:53.317 回答