Javascript 特定属性更改答案

【问题标题】：Javascript Specific Attribute AlteringJavascript 特定属性更改
【发布时间】：2011-08-09 02:32:54
【问题描述】：

我有一个带有链接的站点菜单（当然有，它是一个闪烁的站点菜单），它们只在悬停时改变颜色，这些链接由我的 sitemenu.php 控制，它包含在每个页面中，以便于更改sitemenu .. 我的矛盾是，现在我想要它，这样当你在一个页面上时，带你到那里的链接是彩色的，直到你离开那个页面。我不能手动完成，因为所有链接都在一个主要的 php 脚本上，如果改变它会以同样的方式改变其余部分。

我知道如何添加一个可以永久为链接着色的类，但不知道如何使用 javascript，尽管我认为它只会使用当前页面 url，在站点菜单中找到它并添加一个类属性。

【问题讨论】：

How to give active menu item different styling 的可能重复项
用户没有控制站点菜单上所有链接的php脚本，我无法手动编辑它，因为所有链接都存储在一个脚本中并包含在所有页面中。

标签： php javascript

【解决方案1】：

您可以使用 PHP 脚本或 Javascript 函数来执行此操作。

PHP：

在您的 sitemenu.php 中，在您的菜单所在的位置执行类似的操作 -

<li><a href="index.php"<?php if($page == 'index') echo ' class="active"'; ?>>Home</a></li>
<li><a href="b.php"<?php if($page == 'b') echo ' class="active"'; ?>>B</a></li>
<li><a href="c.php"<?php if($page == 'c') echo ' class="active"'; ?>>C</a></li>
<li><a href="d.php"<?php if($page == 'd') echo ' class="active"'; ?>>D</a></li>

现在，在您的每个页面中，您只需在包含您的 sitemenu.php 文件之前设置 $page。

例如在您的索引页面中执行类似的操作

$page = 'index';
include('sitemenu.php');

除非您使用 Javascript 进行 AJAX，否则您必须解析出您所在的页面，然后更改链接的样式。如果您对每次链接点击都使用 AJAX，那么您所要做的就是在 onclick 函数中使用

this.style.color='somecolor'

希望这回答了您的问题。这里只是个人喜好，但我喜欢使用 PHP 路线。让编辑导航变得非常容易，随时添加/删除项目。

【讨论】：

【解决方案2】：

添加一些像a:visited{color:#eeeeee;}这样的css规则怎么样？如果您来自某个页面，并且菜单中有指向该页面的链接，则该链接应该访问了伪选择器。

【讨论】：

【解决方案3】：

这应该给你基本的想法（使用 jQuery/JavaScript）。它将active 类添加到当前页面。您可能需要根据您网站的链接约定进行一些调整：

var url = document.location.pathname.toString();

$('a').each( function() {
    // if it matches
    if ($(this).attr('href').indexOf(url) != -1) {
       $(this).addClass('active');
    }
});

Here's a working demo.

【讨论】：