突出显示活动链接答案

【问题标题】：Highlight active link突出显示活动链接
【发布时间】：2010-08-12 16:13:34
【问题描述】：

如何在单击时突出显示活动链接，但在单击另一个链接之前保持主页链接突出显示？

如果有帮助，我正在使用 PHP。

这是我的 (x)HTML 代码。

<div id="nav">
    <ul>
        <li><a href="http://localhost/link-1/" class="active">Link 1</a></li>
        <li><a href="http://localhost/link-2/">Link 2</a></li>
        <li><a href="http://localhost/link-3/">Link 3</a></li>
        <li><a href="http://localhost/link-4/">Link 4</a></li>
    </ul>
</div>

【问题讨论】：

“活动”是指指向用户正在查看的页面的链接吗？
@Peter Ajtai 是的，这就是我的意思。

标签： php xhtml

【解决方案1】：

我现在无法测试这个，但如果它对你有用，请告诉我。

var menuArray = new Array();

$(function() {


    $('div#nav ul li').each(function(i) {
        menuArray[i] = this;
        $(this).click(function() {
            for (var x in menuArray)
                if (x == this)
                    $(x).attr('class','active');
                else
                    $(x).attr('class','inactive');
        });
    });
});

编辑好的，我能够对此进行测试，它对我有用。请记住，这需要在您的 HTML 声明之后。

$("li a").each(function(i) {
        $(this).click(function() {
             $(this).attr('class','selected');
             $("li a").not(this).attr('class','notselected');
        });
});

【讨论】：

@Robert - 当堆栈要求服务器端解决方案 (PHP) 时，这是一个客户端 (jQuery) 解决方案。
很确定他说他使用的是 PHP，而不是必须是 PHP。
@Robert - 我在访问的新网站上使用 FF 和 NoScript，所以我不会看到使用您的方法完成的突出显示，但如果使用 PHP 完成，我会看到它。诚然，我是少数。

【解决方案2】：

你可以在php中做一个方法，这里是一个例子：

<div id="nav">
    <ul>
        <li><a href="http://localhost/link-1/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-1')?>>Link 1</a></li>
        <li><a href="http://localhost/link-2/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-2')?>>Link 2</a></li>
        <li><a href="http://localhost/link-3/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-3')?>>Link 3</a></li>
        <li><a href="http://localhost/link-4/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-4')?>>Link 4</a></li>
    </ul>
</div>
<?php
function activateLink($uri,$var) 
{
    if($uri==$var) {
        return 'class="active"';
    }
}
?>

在每一页打印 $_SERVER['REQUEST_URI'] 并将第二个参数传递给方法。

【讨论】：

我到了这里并成功使用了它，干杯。
我建议将$_SERVER['REQUEST_URI'] 移到函数中，这样您就不必重复了。

【解决方案3】：

这将不需要根本不需要 PHP，但是您可以在 PHP 上构建它。我将向您演示如何在 HTML/CSS 中构建它。

在你的文档中试试这个 CSS/HTML（在你的代码之前）：

<style>
       .active {
             color:#336699;
       }

       div#nav ul li a {
             color:#121212;
       }

       div#nav ul li a:visited {
             color:#336699;
       }
</style>

如果所有链接都被访问过，它应该将它们涂成蓝色，如果它们没有被访问过，它将是深灰色。但是，如果您希望它仅突出显示一个链接，则最好使用 JQuery，因为它具有多种功能，只能选择被选中的那个。

希望对您有所帮助。

【讨论】：

我应该寻找什么 JQuery 函数？