無法使用JavaScript將類設置為在我的導航欄中處於活動狀態

Question

我的JavaScript出現問題，誰能幫助我找出我做錯了什么？ 我試圖將活動的類添加到我的導航欄選項卡，我才剛開始使用php，對此我遇到了很多麻煩。

<script>
function activePage(evt) {

    var url = window.location.href;     
    var splitUrl = url.split('/');
    var output = splitUrl[splitUrl.length - 1];
    console.log(output);
    console.log(splitUrl);
    console.log(url);

    if (output === 'index.html') {
        evt.currentTarget.className += " active";
    }

    if (output === 'page1.html') {
        evt.currentTarget.className += " active";
    }

    if (output === 'page2.html') {
        evt.currentTarget.className += " active";
    }

    if (output === 'page3.html') {
        evt.currentTarget.className += " active";
    }
}

window.onload = function () {
    activePage(null, null);
};

<div class="navbar">
  <div class="nav-tab"><a href="#" class="logo">logo</a></div>
  <div class="filler"></div>
  <div class="nav-tab"><a href="index.php" onclick="activePage(event)" class="page">Home</a></div>
  <div class="nav-tab"><a href="page1.php" onclick="activePage(event)" class="page">page1</a></div>
  <div class="nav-tab"><a href="page2.php" onclick="activePage(event)" class="page">page2</a></div>
<div class="nav-tab"><a href="page3.php" onclick="activePage(event)" class="page">page3</a></div>

Answer 1

從這個答案開始 ，正如評論所說，使用classList方法。

if (output === 'index.html') {
    evt.currentTarget.classList.add(" active");
}