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，因为它具有多种功能，只能选择正在选择的那个。

希望有所帮助。

突出显示活动链接

3 个答案: