1

我正在用 HTML、CSS 和 PHP 制作网站。我在页面顶部有一个导航，当您将鼠标悬停在按钮上时，它们会亮起。

现在，当您单击一个按钮并转到该特定页面时，我希望该页面的按钮亮起，表明您在该页面上。我该怎么做呢？在每个页面上定义一个变量然后在菜单中检查它是不可能的，因为我在网站上也有一个论坛，这需要我在每个页面上定义一个变量。

编辑

我设法解决了我的问题。事实证明，我可以只定义页面，对于论坛，我可以在论坛使用的设置文件中做同样的事情。

在我的导航中，我只检查当前页面是什么：

<li id="news"><a <? if(PAGE == "INDEX") print 'class="active"'; ?> href="/">News</a></li>
4

2 回答 2

0

向标签添加一个类（或 ID）body，如下所示：

<body class="Page1">...</body>

然后，在您的 CSS 中，您可以这样说：

.Page1 menu li, menu li:hover {...}
于 2012-06-28T13:03:24.100 回答
0

我不确定如何在 PHP 中检查当前页面 - 不过，那将是理想的。

但是，如果您想依赖 JavaScript，我过去曾成功使用过此功能：

function highlightPage(id){
    //make sure DOM methods are understood
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(id)) return false;
    var nav = document.getElementById(id);
    var links = nav.getElementsByTagName('a');
    for (var i=0; i < links.length; i++){
        var linkurl = links[i].getAttribute('href');
        var currenturl = window.location.href;
        //indexOf will return -1 on non-matches, so we're checking for a positive match
        if (currenturl.indexOf(linkurl) != -1) {
            links[i].className = "here";
            var linktext = links[i].lastChild.nodeValue.toLowerCase();
            document.body.setAttribute("id",linktext);
        }
    }
}

并在页面加载时加载函数：

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

addLoadEvent(function(){
    highlightPage('navigation');
    });

这假定您的导航具有“导航”的 ID，但您可以将其更改为您想要的任何内容。该函数只是将一个“here”类附加到当前导航项。

该脚本来自Jeremy Keith 的“DOM Scripting”。

于 2012-06-28T13:05:36.533 回答