Question

您好，我的网站在菜单上遇到了一些问题。当我第一次加载页面时，菜单的第一个元素应该在IE9上有一个活动的类，活动的类扩展到菜单上的每个元素，而在其他浏览器上，根本不添加类。如果我开始点击菜单按钮，一切都会正常运行。

奇怪的是，这只发生在服务器上，如果我尝试加载例如http://www.foxteam.net/问题出现但如果我加载http://www.foxteam.net/index.php该网站在所有浏览器上正常工作。这对我来说非常混乱，因为据我所知，即使您打开http://www.foxteam.net/，浏览器也会打开index.php文件。

我的情况有什么问题？

该菜单位于名为header.php的单独文件中，该文件包含在index.php中，并附带包含功能。

这是我用来创建此效果的代码，但我怀疑它会有所帮助，因为昨天一切正常，今天我只使用了联系页面：

<ul id="main-menu">
         <li><a href="index.php" class="active">home</a></li>
         <li><a href="about.php">about us</a></li>
         <li><a href="portfolio.php">portfolio</a></li>
         <li><a href="contact.php">contact us</a></li>
</ul>

jQuery的：

$(document).ready(function(){
            var i = document.location.href.lastIndexOf("/");
            var currentPHP = document.location.href.substr(i+1);
            $("ul#main-menu li a").removeClass('active');
            $("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
});

Answer 1

查看您的信息页，您正尝试使用网址的网页细分在网页上找到链接。

当你使用http://www.foxteam.net/index.php时，你的代码可以通过将href设置为'index.php'来获取acnhor。但是，当您使用网址http://www.foxteam.net/时，网页细分为空，因此$("ul#main-menu li a[href^='"+currentPHP+"']")与任何链接都不匹配。

用以下内容替换页面中的当前文档加载脚本：

$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        var link = $("ul#main-menu li a[href^='"+currentPHP+"']");
        if(link.length < 1) {
            link = $("ul#main-menu li a:first");
        }
        link.addClass('active');
});

对于IE问题：试试这个（未经测试）

$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        var link = $("ul#main-menu li a[href^='"+currentPHP+"']");
        if(currentPHP.length < 2 || link.length < 1) {
            link = $("ul#main-menu li a:first");
        }
        link.addClass('active');
});

Answer 2

我得到了这个问题的答案

IE8 v8 not changing class for a DOM element despite JS function changing the element attribute

我想这都是关于切换而不是添加/删除类

Answer 3

为什么使用JavaScript添加和删除类，更好的方法是在支持的情况下执行此操作，以便在关闭JavaScript时使您的网站更易于访问，这也可以解决您当前的链接问题。

查看此帖子How add class='active' to html menu with php

页面加载时不添加类

3 个答案: