Question

我的导航位于一个单独的文件中，该文件使用<?php require语句链接到我的常规页面。我在菜单中的<li>上有一个课程，会将单词更改为白色而不是灰色。所以总之我有：

<li class="active">
   <a href="">Home</a>
</li> 

<li class="">
   <a href="">About</a>
</li>

我需要在查看每个页面时将类更改为active，但在未查看时将其更改为""。我不知道怎么办呢？

我希望这是有道理的。

更新

根据评论，我认为概述我想要做的事情可能会更好一点。

导航本身位于名为navigation.php
实际页面位于ex：home, about, contact
当正在查看页面Home时，类active需要位于该菜单项的<li>上。当正在查看about页面时，该类需要位于该菜单项上，并且home的菜单项类必须为空。

Answer 1

当window.onfocus触发时你想要做的事情 - 在这里使用JQuery类操作，这是最简单的方法。

https://developer.mozilla.org/en-US/docs/Web/API/window.onfocus

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

编辑：如果我理解你的设计，你就会有一个导航栏，其中包含iframe的链接，其中包含子页面（home，about等）。在这种情况下，只需将点击处理程序绑定到设置和取消设置类的导航栏div，并将正确的页面加载到iframe中。

Answer 2

这其实很简单。

在菜单<{p>>中的每个<li>添加唯一ID

然后使用jQuery window.onfocus触发器并将此脚本放在每个页面上（home，about，contact）

window.onfocus = document.getElementById('indexNav').className=" active";

更改元素ID以匹配每个页面。

所以在主页上你会有类似的东西：ID为

的indexNav

然后在“关于”页面上，你会得到类似的内容：aboutNav for id。

Answer 3

我认为这就是你要找的东西，我已经测试过了，

<style>
.active{
color:white !important;
}
<style>
<script>
var links = document.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
    if(links[i].href==this.location) links[i].parentNode.setAttribute('class','color');
};
</script>

这不要求链接标题与位置具有相同的名称。

使用外部文件元素更改类

3 个答案: