使用CSS更改当前页面的链接颜色
一种风格如何与当前页面链接不同？ 我想交换文字和背景的颜色。
HTML：
<ul id="navigation"> <li class="a"><a href="/">Home</a></li> <li class="b"><a href="theatre.php">Theatre</a></li> <li class="c"><a href="programming.php">Programming</a></li> </ul> CSS：
li a{ color:#A60500; } li a:hover{ color:#640200; background-color:#000000; }
a:active ：当你点击链接并按住它时（ active！ ）。
a:visited ：当链接已经被访问时。
如果你想让当前页面对应的链接高亮显示，你可以定义一些特定的链接风格 –
.currentLink { color: #640200; background-color: #000000; }
将这个新类添加到相应的li （链接），无论是在服务器端还是在客户端（使用JavaScript）。
使用jQuery，您可以使用.each函数通过以下代码遍历链接：
$(document).ready(function() { $("[href]").each(function() { if (this.href == window.location.href) { $(this).addClass("active"); } }); });
根据你的页面结构和使用的链接，你可能不得不缩小select的链接，如：
$("nav [href]").each ...
如果您使用的是URL参数，则可能需要删除这些参数：
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
这样你就不必编辑每一页。
可以做到这一点，而无需单独修改每个页面（添加“当前”类到特定的链接），但仍然没有JS或服务器端脚本。 这使用：target伪select器，它依赖于出现在地址#someid 。
<!DOCTYPE> <html> <head> <title>Some Title</title> <style> :target { background-color: yellow; } </style> </head> <body> <ul> <li><a id="news" href="news.html#news">News</a></li> <li><a id="games" href="games.html#games">Games</a></li> <li><a id="science" href="science.html#science">Science</a></li> </ul> <h1>Stuff about science</h1> <p>lorem ipsum blah blah</p> </body> </html>
有几个限制：
- 如果页面没有被导航到使用这些链接之一，它将不会被着色;
- ID必须出现在页面的顶部，否则页面会在访问时跳下来。
只要链接到这些页面的任何链接都包含该id，并且导航栏位于顶部，则不会成为问题。
其他页内链接（书签）也会导致颜色丢失。
最好和最简单的解决scheme：
对于每个页面，您希望各自的链接将颜色更改为切换，将VISITED属性的每个页面中放入一个内部样式，并将每个页面设置为一个单独的类别以便区分链接，因此您不会偶然应用该function。 我们将以白色为例：
<style type="text/css"> .link1 a:visited {color:#FFFFFF;text-decoration:none;} </style>
对于所有其他属性，如LINK，ACTIVE和HOVER，你可以保留在你的style.css中。 您还需要在其中包含VISITED，以便在您点击其他链接时让链接返回的颜色。
a:link – >它定义了未访问链接的样式。
a:hover – >它定义了hover链接的样式。
当鼠标移过它时，链接将被hover。
包括这个！ 在你的页面上你想要改变颜色保存为.php
<?php include("includes/navbar.php"); ?>
然后在包含文件夹中添加一个新文件。
includes/navbar.php <div <?php //Using REQUEST_URI $currentpage = $_SERVER['REQUEST_URI']; if(preg_match("/index/i", $currentpage)||($currentpage=="/")) echo " class=\"navbarorange/*the css class for your nav div*/\" "; elseif(preg_match("/about/*or second page name*//i", $currentpage)) echo " class=\"navbarpink\" "; elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage)) echo " class=\"navbargreen\" ";?> > </div>
N 1.1的答案是正确的。 另外，我已经写了一个小的JavaScript函数来从列表中提取当前链接，这将为您节省修改每个页面以了解其当前链接的麻烦。
<script type="text/javascript"> function getCurrentLinkFrom(links){ var curPage = document.URL; curPage = curPage.substr(curPage.lastIndexOf("/")) ; links.each(function(){ var linkPage = $(this).attr("href"); linkPage = linkPage.substr(linkPage.lastIndexOf("/")); if (curPage == linkPage){ return $(this); } }); }; $(document).ready(function(){ var currentLink = getCurrentLinkFrom($("navbar a")); currentLink.addClass("current_link") ; }); </script>
JavaScript将完成这项工作。
获取文档中的所有链接，并将其参考URL与文档的URL进行比较。 如果有匹配，请添加一个类到该链接。
JavaScript的
<script> currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]') currentLinks.forEach(function(link) { link.className += ' current-link') }); </script>
One Liner Version of Above
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link')});
CSS
.current-link { color:#baada7; }
其他说明
上面的Taraman的jQuery答案只在[href]上进行search，它将返回除依赖于href属性之外a link标签和标签。 在a[href='*https://urlofcurrentpage.com*']只捕获符合标准的链接，因此运行速度更快。
另外，如果你不需要依赖jQuery库，那么一个vanilla的JavaScript解决scheme肯定是要走的路。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <style type="text/css"><!-- .class1 A:link {text-decoration: none; background:#1C1C1C url(....http://img.dovov.commenu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;} .class1 A:visited {text-decoration: none; background:#1C1C1C url(....http://img.dovov.commenu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;} .class1 A:hover {text-decoration: none; background:#1C1C1C url(....http://img.dovov.commenu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;} .class1 A:active {text-decoration: none; background:#1C1C1C url(....http://img.dovov.commenu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;} #nav_menu .current {text-decoration: none; background:#1C1C1C url(....http://img.dovov.commenu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;} a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:none;} a:active {text-decoration:none;} --></style> </head> <body style="background:#000000 url('.....http://img.dovov.combg.jpg') repeat-y top center fixed; width="100%" align="center"> <table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr> <td style="background: url(.....http://img.dovov.commenu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle"> <span class="class1" id="nav_menu"> <a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Home </b></font></a> <a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font></a> <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> About </b></font></a> <a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font></a> </span> </td></tr></table></body></html>
注意：样式在head标签（ <head> .... </head> ）和class =“class1”之间，id =“nav_menu”在ie中：（ – <span class="class1" id="nav_menu"> – ）。
然后，最后一个类属性（ class =“current” ）进入您想要活动的当前链接对应的页面中的链接的超链接代码。
例如：你希望链接标签保持活动或突出显示，当通讯的页面是当前的视图时，转到该页面本身，并通过链接的html代码放置class =“current”属性。 只有在与链接相对应的页面中，当页面处于查看状态时，该选项卡将保持突出显示或与其他选项卡不同。
对于主页 ，转到主页并将其放置在其中。 例如： <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
对于关于页面 ，转到关于页面并将其放置在其中。 例如： <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
对于“联系人”页面 ，请转到联系页面并将其放入其中。 例如： <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
等等……
注意上面的示例表; – 让我们假设这是主页，所以在这个页面上，只有主页链接部分有class =“current”
对不起，没有意义的错误，我不是教授。 但是这个工作对我来说几乎在所有testing过的浏览器中都很好，包括ipad和智能手机。 希望这将有助于一个人在这里，因为非常令人沮丧，想要和不能。 我已经试过了，所以不得不这样做，到目前为止，这对我有好处。
所以，举个例子，如果你正试图改变当前页面上只有CSS的锚点文本，那么这里是一个简单的解决scheme。
我想将我的软件页面上的锚文本颜色更改为浅蓝色：
<div class="navbar"> <ul> <a href="../index.html"><li>Home</li></a> <a href="usefulsites.html"><li>Useful Sites</li></a> <a href="software.html"><li class="currentpage">Software</li></a> <a href="workbench.html"><li>The Workbench</li></a> <a href="contact.php"><li>Contact</a></li></a> </ul> </div>
而在任何人说我有<li>标签和<a>标签混淆了，这是什么使它的工作，因为你正在将值应用于文本本身，只有当你在该页面上。 不幸的是，如果您使用PHP来input标题标记，那么这将不起作用的显而易见的原因。 然后我把它放在我的style.css ，所有的页面都使用相同的样式表：
.currentpage { color: lightblue; }
@Presto谢谢！ 你的工作对我来说很完美，但是我想出了一个更简单的版本来保存改变的一切。
在所需的链接文本周围添加一个<span>标签，并在其中指定类。 （如家庭标签）
<nav id="top-menu"> <ul> <li> <a href="home.html"><span class="currentLink">Home</span></a> </li> <li> <a href="about.html">About</a> </li> <li> <a href="cv.html">CV</a> </li> <li> <a href="photos.html">Photos</a> </li> <li> <a href="archive.html">Archive</a> </li> <li> <a href="contact.html">Contact</a></li> </ul> </nav>
然后相应地编辑你的CSS：
.currentLink { color:#baada7; }
