使用CSS更改当前页面的链接颜色
使用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;}
暮色呼如浏览 1065回答 3
3回答
-
森林海
使用jQuery，您可以使用该.each函数使用以下代码迭代链接：$(document).ready(function() { $("[href]").each(function() { if (this.href == window.location.href) { $(this).addClass("active"); } });});根据您的页面结构和使用的链接，您可能需要缩小选择范围，例如：$("nav [href]").each ...如果您使用的是URL参数，则可能需要删除以下内容：if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...这样您就不必编辑每个页面。 -
猛跑小猪
可以实现这一点，而无需单独修改每个页面（将“当前”类添加到特定链接），但仍然没有JS或服务器端脚本。这使用：target伪选择器，它依赖于#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，并且导航栏位于顶部，就不会有问题。其他页内链接（书签）也会导致颜色丢失。
随时随地看视频慕课网APP
JavaScript
Html/CSS