突出显示活动链接

Question

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

如果有帮助的话，我正在使用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>

Answer 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');
        });
});

Answer 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‘并将第二个参数传递给该方法。

Answer 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，因为它有很多功能，只选择被选中的那个。

希望这能有所帮助。