1

我的导航位于一个单独的文件中，该文件通过<?php require声明链接到我的常规页面。我<li>在菜单上有一个类，它会将单词更改为白色而不是灰色。所以简而言之，我有：

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

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

我需要将类更改active为查看每个页面的时间，而""不是查看它的时间。我不知道该怎么做？

我希望这是有道理的。

更新：

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

  1. 导航本身位于一个名为navigation.php
  2. 实际页面位于文件的基础上，例如：home, about, contact
  3. 查看页面时Home，该类active需要位于<li>该菜单项的 。在about查看页面时，该类需要在该菜单项上，并且菜单项类home需要为空白。
4

3 回答 3

2

您正在寻找在 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 上的链接，其中包含子页面（主页、关于等）。在这种情况下，只需将单击处理程序绑定到设置和取消设置类的导航栏 div，并将正确的页面加载到 iframe 中。

于 2013-07-11T23:47:29.933 回答
0

这实际上非常简单。

<li>为菜单中的每一项添加唯一 ID

然后使用 jQuery window.onfocus 触发器并将此脚本放置在每个页面（主页、关于、联系人）上

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

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

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

然后在 About 页面上，您会看到类似的内容：关于 id 的 aboutNav。

于 2013-07-11T23:58:25.500 回答
0

我想这就是你要找的，我已经测试过了，

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

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

于 2013-07-12T00:23:02.910 回答