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

Question

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

Answer 1

Check out the CSS selectors :active , :hover , :link , and :visited .

• :active select and style the active link
• :hover selects and styles a link with the user hovers over it
• :link selects and styles a link that hasn't been visited
• :visited selects and styles a link that has been visited

A :hover selector must cover after a :link and :visited selector. Also, an :active selector must come after a :hover selector.

You would use these like this:

a:link {
    color: red;
}

a:visited {
    color: green;
}

a:hover {
    color: blue;
}

a:active {
    color: yellow;
}

Check out this article: http://www.w3schools.com/css/css_link.asp

Answer 2

I'm not sure how it's done in Wordpress, but generally speaking this is how you could do it when you have to work with php includes:

for every page you define a variable containing the page name, for example, in the about page you define something like

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

and in the Home page you'd have

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

Then inside the navigation you'd check what the $page value is and echo a "active" class name for the link. I hope this explains it:

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

What this does is: it checks the value of the $page variable declared in the page and adds a "active" class to the anchor tag if the value matches, otherwise it leaves the class name blank.

And then in your CSS you'd have the styles for the class .active like for example:

.active{ color: green; }

The point is that you need to make sure that the "current" page's anchor has a class (usually an "active" or "current" class, but you can name it anything you want), and then using php you check the name of the page as I mentioned above and then add that class name to the anchor (or list item, whatever works for you).

I'm not sure how you'd go about that in Wordpress, but maybe you could use the above technique and customize it somehow to fit your needs. (like if it's a custom widget you made you could use that)

Hope that helped.