PHP/jQuery - 突出显示当前页面的菜单答案

【问题标题】：PHP/jQuery - Highlight the menu with current pagePHP/jQuery - 突出显示当前页面的菜单
【发布时间】：2010-12-19 05:05:10
【问题描述】：

嗨
我将根据当前正在阅读的页面突出显示一个菜单项，当用户通过菜单点击不同的页面时，该菜单项将突出显示，例如http://templates.joomlart.com/ja_pyrite/index.php?option=com_content&view=article&id=44&Itemid=53。

如果我使用 PHP/jQuery 来检查 url 并突出显示菜单，如果 url 看起来像“http://example.com/contact”会很好，但上面的例子很糟糕。

如果我不检查 url 并突出显示菜单项，有人可以给我一个可以达到相同效果的想法/方法吗？

谢谢

【问题讨论】：

标签： php jquery

【解决方案1】：

我在960 Development 上找到了这个，为此搜索了一段时间，当我终于找到它时非常高兴！

<ul class="sub-nav" >
<?php
    $full_name = $_SERVER['PHP_SELF'];
    $name_array = explode('/',$full_name);
    $count = count($name_array);
    $page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>

它对我来说完全有效，让我需要“活跃”的页面变得活跃，并且当我在另一个页面时，让任何上过课程的人都活跃起来！

看看吧！

编辑：

即使您有一个（在本例中）contact.php?person=John，它也会“激活”contact.php 链接！

【讨论】：

【解决方案2】：

做这样的事情

<div id="nav_menu">
<?php
    $currentFile = $_SERVER['REQUEST_URI'];
    $pages = array(
        array("file" => "/index.php", "title" => "Home"),
        array("file" => "/about.php", "title" => "About Us"),
        array("file" => "/schedule.php", "title" => "Schedule")
    );
    $menuOutput = "<ul>";
    foreach ($pages as $page) {
       $activeAppend = ($page["file"] == $currentFile) ? " id='active' " : "class='nav_button'";
       $currentAppend = ($page["file"] == $currentFile) ? " id='current' " : "class='nav_button'";
       $menuOutput .= "<li " . $currentAppend . ">"
                   .  "<a href='" . $page["file"] . "' id='".$page["id"]."'>" . $page["title"] ."</a>"
                   .  "</li>"; 
    }           
    $menuOutput .= "</ul>";

    echo $menuOutput;
?>
</div>

我希望你明白，我之前在 stackoverflow 上有过这个，但我忘记了问题是什么

编辑：

在这里我终于找到了original question

【讨论】：

【解决方案3】：

在您用于生成导航的 HTML 代码中，添加一些 PHP 逻辑，该逻辑将向您当前所在页面的按钮添加 selected 类。然后为 selected 类添加一些 CSS。

【讨论】：

【解决方案4】：

你能做这样的事情吗？它应该选择指向当前页面的任何链接 - 这样您就可以应用任何您喜欢的方式来突出显示它。

$('a[href="'+window.location+'"]').addClass('menu-highlight');

【讨论】：

所以突出显示菜单项的想法应该是检查 url？
@Charles：对不起，我不明白。你在问什么？
我不知道你的代码的功能/含义是什么。是否检查 url 以了解用户正在阅读哪个页面并为特定菜单项提供 css 类？
@Charles：是的，这就是我的代码的意图。我认为这是比在服务器端添加逻辑更好的方法。但我没有对此进行测试 - 您可能需要对 window.location 进行 url 编码或转义，以便字符串匹配。
感谢您的想法，但是如果我有很多页面，那么检查的脚本可能会很长。对这种情况有什么想法吗？

【解决方案5】：

一个好的技巧是给body 元素添加一个特定的class 或id 属性，然后在CSS 中设置样式。它需要最少的服务器端编程，并将所有的表示逻辑保持在 CSS 中。

<style>
.contact #contact { background:#000; }
...
</style>

<body class="contact">
    <ul>
        <li id="homepage">Homepage</li>
        ...
        <li id="contact">Contact</li>
    </ul>
 ...

【讨论】：