: 使用 javascript 的活动链接答案

【问题标题】：:Active links using javascript: 使用 javascript 的活动链接
【发布时间】：2014-04-30 07:53:14
【问题描述】：

好的，这是我的困境。我有一个 header.php 文件，其中包含我使用的标题信息（导航和徽标），以便我可以在需要它的每个页面中包含该文件，并便于编辑。我遇到的问题是我显然不能使用 :active 来着色或更改链接文本，以便用户知道他们在哪个页面上。

我怎样才能以我正在做的方式实现我想要的，或者我是否坚持这样做很长的路要走。有没有javascript可以做到这一点。

了解我是 HTML 和 CSS 新手，我正在寻找简单的方法来更改页眉和页脚，而无需单独编辑每个页面。

马科斯

【问题讨论】：

你需要使用 php (stackoverflow.com/questions/10884624/…) 或 JavaScript (stackoverflow.com/questions/2397370/…，虽然这似乎是 jQuery 而不是普通的 JS，可悲的是)。

标签： javascript php html css

【解决方案1】：

我不知道你的 html 是什么样子，但是例如，如果你包含 jQuery，并且你在链接中使用绝对补丁，你可以使用这样的东西：

$('a[href="'+document.location.origin+document.location.pathname+'"]').css('color', '#f00');

或者如果你没有 jQuery 并且有绝对链接，你可以使用这样的东西：

var a = document.getElementsByTagName('a');
for (i in a) { 
 if (a[i].href == document.location.origin+document.location.pathname){
    // red color 
    a[i].style.color = '#900'
 }
}

【讨论】：

我的比较简单。我不知道如何将我的代码放在这里以获得像上面一样的灰色框。但它本质上是：
PageName
当然它们在一个 div 中并且在那里页面比一个页面多，现在的 css 只是用于悬停，但这不是问题。

【解决方案2】：

将下面的 CSS 添加到您的代码中。然后将类应用于您的 <a> 标签。

/*choose current(active) a tag which has class named niceClass*/
.niceClass a.current {color:red;}

<a href="http://www.example.com"  class="niceClass"> Link Title </a>
<a href="http://www.example.com2" class="niceClass"> Link Title2 </a>
...

【讨论】：

没有。他想为指向当前页面的链接设置样式，而不是学习如何使用 CSS，并且您显示的 CSS（关于选择器）是错误的。提示：如果不使用 JavaScript 或服务器端语言，则无法回答此问题。
谢谢，我会研究一下并尝试应用它。如果我可以根据我在您发布的链接上阅读的内容整理一些内容，我会回复。