Question

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

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

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

谢谢

Answer 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链接！

Answer 2

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

Answer 3

做这样的事情

<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

Answer 4

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

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

Answer 5

一种好的方法是向class元素添加特定的id或body属性，然后在CSS中设置样式。它需要最少的服务器端编程，并将所有表示逻辑保留在CSS中。应该这样做。

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

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

PHP / jQuery - 使用当前页面突出显示菜单

5 个答案: