我有一个常见的侧面导航栏，我已经将几页链接到它。我已经将其包含在所有页面上，使用以下PHP包含语句。

<?php include '../php/playersidenav.php';?>.

Sidenavigation如下。

<div class="column sidenav">
    <div class="row">
        <img src="../images/avatar.png" alt="Avatar">
        <h1 style="color:white;float:right;padding-top:7%">Hello John!</h1>
    </div>
    <a class="normal" href="news.php" onclick="makeActive(event)">NEWS</a>
    <a class="normal" href="schedule.php" onclick="makeActive(event)">SCHEDULE</a>
    <a class="normal" href="partners.php" onclick="makeActive(event)">PARTNERS</a>
    <a class="normal" href="coaches.php" onclick="makeActive(event)">COACHES</a>
    <a class="normal" href="tournaments.php" onclick="makeActive(event)">TOURNAMENTS</a>
    <a class="normal" href="events.php" onclick="makeActive(event)">EVENTS</a>
    <a class="normal" href="shops.php" onclick="makeActive(event)">SHOPS</a>
</div>

此代码工作正常，除非它不会使链接类活动。我曾经追随javascript函数以使链接处于活动状态。但它不起作用。

function makeActive(evt) {
    var i, normal;
    normal = document.getElementsByClassName("normal");
    for (i = 0; i < normal.length; i++) {
        normal[i].className = normal[i].className.replace(" active", "");
    }
    evt.currentTarget.className += " active";
}

这是CSS代码我在激活时常用的链接样式。

.sidenav a.active {
    background-color: #001F5A;
    color: white;
    border-radius: 5px;
}

我一直试图找到我的代码有什么问题，但我似乎无法找到我在这里缺少的东西。请帮忙！谢谢！

分析解答

您可以做的一种方式是利用浏览器的localStorage - 如果通过删除如下如下inline事件处理程序稍微修改上述playersidenav.php，然后在此文件中包含一些JavaScript，因此它如下所示：

<div class="column sidenav">
    <div class="row">
        <img src="../images/avatar.png" alt="Avatar">
        <h1 style="color:white;float:right;padding-top:7%">Hello John!</h1>
    </div>
    <a class="normal" href="news.php">NEWS</a>
    <a class="normal" href="schedule.php">SCHEDULE</a>
    <a class="normal" href="partners.php">PARTNERS</a>
    <a class="normal" href="coaches.php">COACHES</a>
    <a class="normal" href="tournaments.php">TOURNAMENTS</a>
    <a class="normal" href="events.php">EVENTS</a>
    <a class="normal" href="shops.php">SHOPS</a>
</div>
<script>
    //The name of the store in localStorage
    const store='LINK_ACTIVATED_MEMORY';
    
    // the class to add to indicate active state
    const cn='active';
    
    // nodelist of all sidenav links
    const links=document.querySelectorAll('.sidenav > a.normal');

    // ensure any "active" links have class removed and then 
    // save new hyperlink to localStorage
    const makeActive=(e)=>{
      e.preventDefault();
      links.forEach(a=>a.classList.remove(cn));
      localStorage.setItem( store, e.target.href );
      location.href=e.target.href;
    };
    
    // on page load run this function - check the store
    // and iterate through nodelist to match saved value and
    // node value.
    const loadActive=()=>{
        let stored=localStorage.getItem( store );
        if( stored==null )return;
        
        Array.from( links ).some(a=>{
            if( stored==a.href ){
                a.classList.add(cn)
                return true;
            }
        });
    };
    
    //bind the event handler
    links.forEach(a=>a.addEventListener('click',makeActive));
    
    // load active link class
    loadActive();
    
</script>

被单击的链接将存储在localStorage中，然后加载新页面时，将调用loadActive函数以设置active类。根据@kiko软件的评论 - 单击超链接时的默认操作将屏蔽任何突出显示尝试，以便在第load/reload页面上完成类的实际设置。

在思考@Kiko软件的建议之后，这可以通过PHP完成，并将其分配到JavaScript，我将其写为作为替代解决方案。

包含的文件playersidenav.php：

<?php

    $cn='active';
    
    $links=array(
        'home.php'          =>  'TEST PAGE HOME',
        'news.php'          =>  'NEWS',
        'schedule.php'      =>  'SCHEDULE',
        'partners.php'      =>  'PARTNERS',
        'coaches.php'       =>  'COACHES',
        'tournaments.php'   =>  'TOURNAMENTS',
        'events.php'        =>  'EVENTS',
        'shops.php'         =>  'SHOPS'
    );
?>

    <div class="column sidenav">
        <div class="row">
            <img src="../images/avatar.png" alt="Avatar" />
            <h1 style="color:white; float:right; padding-top:7%">Hello John!</h1>
        </div>
<?php
        foreach( $links as $href => $text ){
            printf(
                '<a href="%s" class="normal %s">%s</a>',
                $href,
                ( basename( $_SERVER['SCRIPT_FILENAME'] )==$href ? $cn : '' ),
                $text
            );
        }
?>
    </div>

和一个示例页面调用所述文件，称为home.php：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            .sidenav a.active {
                background-color: #001F5A;
                color: white;
                border-radius: 5px;
            }
            a{margin:1rem;}
        </style>
    </head>
    <body>
    
        <?php
            require sprintf('%s/playersidenav.php',__DIR__);
        ?>
        
        <h1>Hello World!</h1>
    </body>
</html>

PHP包含文件将数组键与当前SCRIPT_FILENAME服务器变量进行比较，并相应地添加类并完全否定对JavaScript的需求。刚刚证明旧的谚语 - "There's more than one way to skin a cat"