javascript - 突出显示当前页面

Question

我正在一个网站上工作，我厌倦了将页眉和页脚复制/粘贴到每个页面，因为当您需要更改一个字母时，您必须在使用该页眉/页脚的所有页面上更改它。所以我“复制”了一个从 Laravel 学到的函数，partials。

我将 header 的 HTML 写入一个文件中，然后使用 PHP 将其加载到页面。

我的标题代码:

<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;
}

标题包含在这样的页面中:

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

这是有效的，唯一的问题是我想在标题中显示用户当前所在的页面。只需在标题中的当前页面名称下划线即可。

函数highlight()可以工作，但是onload不工作。onLoad 函数似乎不支持 anchor 标记。

我该如何解决这个问题？如何在每个 anchor 标记 onLoad 上执行highlight()函数？

允许使用 Javascript 和 JQuery，但我不使用框架。

Answer 1

看来您没有使用 Jquery '将保持简单的 javascript

 var page = location.pathname.substring(
    location.pathname.lastIndexOf('/') + 1,
 );

document.querySelectorAll('li > a').forEach(el => {
  if (page == el.getAttribute('href')) {
    el.classList.add('current');
  }
});

为了解释这里发生的情况，我们选择列表项中的所有 anchor 标记。我建议为列表提供一个 class ，以便您可以在 javascript 中更好地识别它，如下所示。

document.querySelectorAll('.nav a')

并将该类添加到 HTML

<ul class="nav">