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

尝试以下代码，

您的代码无法正常工作，因为它的 重定向 到另一个页面

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

菜单onclick功能没有被看到

2 个答案: