菜单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>