菜單onclick功能未顯示

Question

我正在嘗試根據此人單擊的站點頁面來更改菜單按鈕的顏色。 當我單擊菜單鏈接時，根本沒有調用onclick函數（我嘗試過console.log（））。 我正在使用header.php文件將標頭加載到每個頁面中，因此無法基於僅通過html加載哪個頁面來更改類。 我正在使用jquery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在header.php文件中：

       <nav id = "menu">
            <ul class="nav">
                <li><a class="toggle-colour" href = "index.php">Home</a></li>
                <li><a class="toggle-colour" href = "work.php">Work</a></li>
                <li><a class="toggle-colour" href = "clients.php">Clients</a></li>
                <li><a class="toggle-colour" href = "contact.php">Contact</a></li>

            </ul>
        </nav>

JS：

 $(document).ready(function() {

  $('.nav li a').on('click', function() {
      $(this).toggleClass("selected");  
    });
});

的CSS

 a { color: #fff; }
a.selected {
        color: #444;
    }

Answer 1

在標頭php文件中，為什么不檢查頁面然后應用該類？

<nav id = "menu">
            <ul class="nav">
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/index.php"){ echo "selected"; } ?>" href = "index.php">Home</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/work.php"){ echo "selected"; } ?>" href = "work.php">Work</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/clients.php"){ echo "selected"; } ?>" href = "clients.php">Clients</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/contact.php"){ echo "selected"; } ?>" href = "contact.php">Contact</a></li>

            </ul>
    </nav>

...正如其他人指出的那樣，當您更改頁面時，不會遵循javascript代碼。 如果要在更改頁面時突出顯示它們所在的頁面，可以執行上述操作。 上面的代碼檢查頁面並應用該類（如果它們在該頁面上）。

Answer 2

試試下面的代碼，

您的代碼無法重定向 ，因為它已重定向到另一個頁面

 $(document).ready(function() { $('.nav li a').on('click', function() { $(this).toggleClass("selected"); return false; }); }); 

 a { color: #ddd; } a.selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="menu"> <ul class="nav"> <li><a class="toggle-colour" href="">Home</a> </li> <li><a class="toggle-colour" href="">Work</a> </li> <li><a class="toggle-colour" href="">Clients</a> </li> <li><a class="toggle-colour" href="c">Contact</a> </li> </ul> </nav>