Question

Hi I seem to be having some problems with my website at the menu. When I first load the page the first element of the menu should have a class active on IE9 the class active is extended to every element on the menu and on the other browsers the class isn’t added at all. If I start clicking on the menu buttons everything start’s running normally.

Weird thing is that this only happens on the server if I try loading for example http://www.foxteam.net/ the problem appears but if I load http://www.foxteam.net/index.php the site works normally on all browsers.
This is very confusing for me because from what I know even when you open http://www.foxteam.net/ the browser opens index.php file.

What is the problem in my case?

The menu is in the a separate file called header.php that is included in index.php with include function.

This is the code I have used to create this effect but I doubt it will help because yesterday everything worked fine and today I only worked with the contact page:

<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

Looking at your page, you are trying to find a link on the page using the page segment of the url.

When you use http://www.foxteam.net/index.php your code is able to pickup the acnhor with href set to ‘index.php’. However when you use the url http://www.foxteam.net/ the page segment is blank and hence $("ul#main-menu li a[href^='"+currentPHP+"']") is not matching any link.

Replace the current document load script in your page with this one:

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

For IE issue: Try this (not tested)

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