Question

我在所有页面都有这样的菜单，并且想要添加一个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或其他东西），但我正在寻找一个简单的解决方案。

Answer 1

这很脏但很简单：

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

Answer 2

这应该有助于您入门

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

Answer 3

作为已经提供的解决方案的替代方案，您只需将一个类添加到主<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/

Answer 4

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

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）。

添加类以使用PHP突出显示所选菜单的最简单方法是什么？

4 个答案: