如何更改当前打开链接的文本颜色并保持未打开链接的默认颜色？这样用户就可以了解他当前所处的链接

Question

我想改变活动文本的颜色。所以用户知道他使用哪个页面....例如我们有2个HOME和ABOUT页面的hyberlink ..我想点击HOME链接它的颜色变化（即绿色）和其他菜单项如ABOUT将保持默认颜色（即红色）..当我点击ABOUT菜单时，它的文本应该改变（即绿色），ASLO HOME菜单将保持其默认颜色（即红色），我想在wordpress的侧边栏（在文本插件/小部件），我给了2个不同页面的超链接，所以我会更好，如果它得到HTML和CSS代码或任何其他建议将不胜感激希望你guyes将理解我的问题，提前感谢帮助我，等待积极的回应谢谢

Answer 1

查看CSS选择器:active ， :hover ， :link和:visited 。

• :active选择并设置活动链接的样式
• :hover选择并设置链接，用户将鼠标悬停在链接上
• :link选择并设置未访问过的链接的样式
• :visited选择并设置已访问过的链接的样式

答:hover选择器必须覆盖在:link和:visited选择器之后。 此外， :active选择器必须位于:hover选择器之后。

你会像这样使用这些：

a:link {
    color: red;
}

a:visited {
    color: green;
}

a:hover {
    color: blue;
}

a:active {
    color: yellow;
}

看看这篇文章： http ： //www.w3schools.com/css/css_link.asp

Answer 2

我不确定它是如何在Wordpress中完成的，但一般来说，当你必须使用php时，你可以做到这一点，包括：

对于每个页面，您定义一个包含页面名称的变量，例如，在您定义类似的about页面中

<?php $page = "about"; ?>

并在主页中你有

<?php $page = "home"; ?>

然后在导航内部，您将检查$page值是什么，并回显该链接的“活动”类名称。 我希望这可以解释它：

<li><a href="home.php" class="<?php $page == "home" ? "active" : "" ?>">Home</a></li>
<li><a href="about.php" class="<?php $page == "about" ? "active" : "" ?>">About</a></li>

它的作用是：它检查$page声明的$page变量的值，如果值匹配则将“active”类添加到anchor标记，否则它将类名留空。

然后在你的CSS中，你将拥有类的类型.active ，例如：

.active{ color: green; }

关键是你需要确保“当前”页面的锚点有一个类（通常是“活动”或“当前”类，但你可以将它命名为任何你想要的东西），然后使用php检查你的名字我上面提到的页面，然后将该类名添加到锚点（或列表项，任何适合您的）。

我不确定你是如何在Wordpress中实现的，但也许你可以使用上述技术并以某种方式定制它以满足你的需求。 （如果它是你制作的自定义小部件，你可以使用它）

希望有所帮助。