0

嗨，我的网站在菜单上似乎有一些问题。当我第一次加载页面时，菜单的第一个元素应该有一个在 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');
});
4

3 回答 3

2

查看您的页面，您正在尝试使用 url 的页面段在页面上查找链接。

当您使用http://www.foxteam.net/index.php时，您的代码能够获取带有 href 设置为 'index.php' 的 acnhor。但是，当您使用 URL 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');
});
于 2012-07-11T14:19:16.787 回答
0

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

查看这篇文章How add class='active' to html menu with php

于 2012-07-11T14:38:31.013 回答
0

鉴于我在这个问题上得到的答案

尽管 JS 函数更改了元素属性，IE8 v8 并未更改 DOM 元素的类

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

于 2012-07-11T14:19:22.213 回答