I'm working on a website, and I was tired of copy/pasting headers and footers to each page, because when you than need to change one letter, you have to change it on all pages using that header/footer. So I 'copied' a function I learnt from Laravel, partials.

I write the HTML of the header in one file, and than load that to the page using PHP.

Code of my header:

```
<div class="header">                                                                           
    <div class="header-wrapper">                                                               
        <a href="index.php">                                                                   
            <img class="logo" src="images/logo.png" />                                         
        </a>                                                                                   
        <ul>                                                                                   
            <li><a onload="highlight(this);" href="index.php">Home</a></li>                    
            <li><a onload="highlight(this);" href="over.php">Over ons</a></li>                 
            <li><a onload="highlight(this);" href="catalogus.php">Onze machines</a></li>       
            <li><a onload="highlight(this);" href="portfolio.php">Portfolio</a></li>           
            <li><a onload="highlight(this);" href="contact.php">Contact</a></li>               
        </ul>                                                                                  
    </div>                                                                                     
</div>                                                                                         

<script>                                                                                       
    //Highlight current                                                                        
    function highlight(obj) {                                                                  
        var page = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);        
        if (page == obj.getAttribute("href")) {                                                
            obj.classList.add("current");                                                      
        }                                                                                      

        alert(page);                                                                           
        alert(obj.getAttribute("href"));                                                       
    }                                                                                          

</script>  

```

CSS:

```
.current {
    text-decoration: underline;
}

```

And the header is included in pages like this:

```
<?php
 //Include header
 $f = fopen("partial/header.html", "r");
 echo fread($f, 4096);
?>

```

This is working, the only problem is that I want to show the current page the user is on in the header. This by just underlining the current page-name in the header.

The function highlight() is working, but the onload isn't working.
It seems that the anchor-tag isn't supported by the onLoad-function.

How would I fix this? How to execute the highlight()-function on each anchor tag onLoad?

Javascript and JQuery allowed, am not using a framework.